Skip to content

Commit

Permalink
feat: 新增快捷键
Browse files Browse the repository at this point in the history
  • Loading branch information
@yaolunmao
yaolunmao committed Jan 29, 2023
1 parent 3bbfc19 commit 5ffbf87
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 10 deletions.
72 changes: 70 additions & 2 deletions src/components/webtopo-svg-edit/components/center-panel/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@
<template>
<div
class="canvas"
tabindex="0"
ref="canvasRef"
@drop="dropEvent"
@dragenter="dragEnterEvent"
@dragover="dragOverEvent"
@mousedown="onCanvasMouseDown"
@mousemove="onCanvasMouseMove"
@mouseup="onCanvasMouseUp"
@contextmenu="onCanvasContextMenuEvent"
@keydown="onHandleKeyDown"
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -178,7 +181,7 @@
</div>
</template>
<script setup lang="ts">
import { computed, getCurrentInstance, reactive, ref } from 'vue';
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { useConfigStore } from '@/store/config';
import { useGlobalStore } from '@/store/global';
import {
Expand Down Expand Up @@ -212,7 +215,9 @@
import ConnectionLine from '@/components/webtopo-svg-edit/components/connection-line/index.vue';
import { IVisiableInfo } from './types';
import { ComponentImport } from '@/config-center';
import { useContextMenuStore } from '@/store/system';
import { useContextMenuStore, useEditPrivateStore } from '@/store/system';
import { EContextMenuInfoType } from '@/store/system/types';
import { useHistoryRecord } from '@/hooks';
// import HandlePanel from '../handle-panel/index.vue';
//注册所有组件
const instance = getCurrentInstance();
Expand All @@ -224,8 +229,10 @@
const globalStore = useGlobalStore();
const configStore = useConfigStore();
const svgEditLayoutStore = useSvgEditLayoutStore();
const editPrivateStore = useEditPrivateStore();
const contextMenuStore = useContextMenuStore();
const contextMenuRef = ref<HTMLElement>();
const canvasRef = ref<HTMLElement>();
const cursor_style = computed(() =>
globalStore.intention == EGlobalStoreIntention.MoveCanvas
? 'grab'
Expand Down Expand Up @@ -312,6 +319,7 @@
globalStore.setDoneJson(done_item_json);
globalStore.intention = EGlobalStoreIntention.None;
}
canvasRef.value?.focus();
};
const dragEnterEvent = (e: DragEvent) => {
//dragenter和dragover一定要阻止浏览器默认行为 不然不会触发drop
Expand All @@ -322,6 +330,7 @@
e.preventDefault();
};
const onSvgMouseDown = (select_item: IDoneJson, index: number, e: MouseEvent) => {
canvasRef.value?.focus();
if (globalStore.intention === EGlobalStoreIntention.Connection) {
return;
}
Expand Down Expand Up @@ -726,12 +735,71 @@
height: actual_bound.height * scale_y
};
};
const onHandleKeyDown = (e: KeyboardEvent) => {
console.log(e, 733);
e.preventDefault();
if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowUp') {
globalStore.done_json[globalStore.handle_svg_info.index].y -= 1;
useHistoryRecord(globalStore.done_json);
} else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowDown') {
globalStore.handle_svg_info.info.y += 1;
useHistoryRecord(globalStore.done_json);
} else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowLeft') {
globalStore.handle_svg_info.info.x -= 1;
useHistoryRecord(globalStore.done_json);
} else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowRight') {
globalStore.handle_svg_info.info.x += 1;
useHistoryRecord(globalStore.done_json);
}
//ctrl c
else if (e.ctrlKey && e.key.toLowerCase() == 'c') {
contextMenuStore.onContextMenuClick(EContextMenuInfoType.Copy);
}
//deleted
else if (!e.ctrlKey && e.key == 'Delete') {
contextMenuStore.onContextMenuClick(EContextMenuInfoType.Delete);
}
//上移一层
else if (e.ctrlKey && e.key == 'ArrowUp') {
contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveUpOneLevel);
}
//下移一层
else if (e.ctrlKey && e.key == 'ArrowDown') {
contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveDownOneLevel);
}
//置于底层
else if (e.ctrlKey && e.key == 'ArrowLeft') {
contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveDownTopLevel);
}
//置于顶层
else if (e.ctrlKey && e.key == 'ArrowRight') {
contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveUpTopLevel);
}
//ctrl+shift+z
else if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() == 'z') {
editPrivateStore.topRedoBtnClick();
}
//ctrl+z
else if (e.ctrlKey && e.key.toLowerCase() == 'z') {
editPrivateStore.topUndoBtnClick();
}
//ctrl+delete
else if (e.ctrlKey && e.key.toLowerCase() == 'delete') {
globalStore.done_json.length <= 0 || globalStore.setDoneJson([]);
}
};
onMounted(() => {
canvasRef.value?.focus();
});
</script>
<style lang="less" scoped>
.canvas {
width: 100%;
height: 100%;
cursor: v-bind('cursor_style');
&:focus-visible {
outline: 0px;
}
}

.svg-item-none {
Expand Down
6 changes: 3 additions & 3 deletions src/components/webtopo-svg-edit/components/top-panel/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="flex justify-between" style="width: calc(100% - 440px)">
<div class="flex items-center">
<el-icon
title="撤销"
title="撤销 ctrl+z"
:size="20"
:class="`${
editPrivateStore.getTopBtnUndoStatus ? 'icon-normal' : 'icon-disable'
Expand All @@ -28,7 +28,7 @@
<svg-analysis name="undo"></svg-analysis>
</el-icon>
<el-icon
title="重做"
title="重做 ctrl+shift+z"
:class="`${editPrivateStore.getTopBtnRedoStatus ? 'icon-normal' : 'icon-disable'} ml-5px`"
:size="20"
@click="() => editPrivateStore.topRedoBtnClick()"
Expand All @@ -37,7 +37,7 @@
</el-icon>
<el-divider direction="vertical"></el-divider>
<el-icon
title="清空"
title="清空 ctrl+delete"
:class="`${globalStore.done_json.length > 0 ? 'icon-normal' : 'icon-disable'}`"
:size="20"
@click="onDeleteBtnClick"
Expand Down
17 changes: 12 additions & 5 deletions src/store/system/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { objectDeepClone, randomString } from '@/utils';
import { defineStore } from 'pinia';
import { useGlobalStore } from '../global';
import { IDoneJson } from '../global/types';
import { EGlobalStoreIntention, IDoneJson } from '../global/types';
import { ContextMenuStoreState, EContextMenuInfoType, EditPrivateStoreState } from './types';
import { useHistoryRecord } from '@/hooks';
/**
Expand Down Expand Up @@ -99,6 +99,7 @@ export const useContextMenuStore = defineStore('context-menu-store', {
if (!globalStore.handle_svg_info) {
return;
}
globalStore.intention = EGlobalStoreIntention.Select;
switch (type) {
case EContextMenuInfoType.Copy:
const temp_item = objectDeepClone<IDoneJson>(globalStore.handle_svg_info.info);
Expand All @@ -108,10 +109,12 @@ export const useContextMenuStore = defineStore('context-menu-store', {
temp_item.y += 10;
globalStore.setDoneJson(temp_item);
this.display = false;
globalStore.setHandleSvgInfo(temp_item, globalStore.done_json.length);
break;
case EContextMenuInfoType.Delete:
globalStore.spliceDoneJson(globalStore.handle_svg_info.index);
this.display = false;
globalStore.setHandleSvgInfo(null);
break;
case EContextMenuInfoType.MoveUpOneLevel:
if (
Expand All @@ -126,6 +129,7 @@ export const useContextMenuStore = defineStore('context-menu-store', {
globalStore.done_json[globalStore.handle_svg_info.index + 1] = temp_up_one;
useHistoryRecord(globalStore.done_json);
this.display = false;
globalStore.setHandleSvgInfo(temp_up_one, globalStore.handle_svg_info.index + 1);
break;
case EContextMenuInfoType.MoveDownOneLevel:
if (globalStore.done_json.length === 1 || globalStore.handle_svg_info.index === 0) {
Expand All @@ -137,16 +141,18 @@ export const useContextMenuStore = defineStore('context-menu-store', {
globalStore.done_json[globalStore.handle_svg_info.index - 1] = temp_down_one;
useHistoryRecord(globalStore.done_json);
this.display = false;
globalStore.setHandleSvgInfo(temp_down_one, globalStore.handle_svg_info.index - 1);
break;
case EContextMenuInfoType.MoveDownTopLevel:
if (globalStore.done_json.length === 1 || globalStore.handle_svg_info.index === 0) {
return;
}
const temp_up_top = globalStore.handle_svg_info.info;
const temp_down_top = globalStore.handle_svg_info.info;
globalStore.done_json.splice(globalStore.handle_svg_info.index, 1);
globalStore.done_json.unshift(temp_up_top);
globalStore.done_json.unshift(temp_down_top);
useHistoryRecord(globalStore.done_json);
this.display = false;
globalStore.setHandleSvgInfo(temp_down_top, 0);
break;
case EContextMenuInfoType.MoveUpTopLevel:
if (
Expand All @@ -155,11 +161,12 @@ export const useContextMenuStore = defineStore('context-menu-store', {
) {
return;
}
const temp_down_top = globalStore.handle_svg_info.info;
const temp_up_top = globalStore.handle_svg_info.info;
globalStore.done_json.splice(globalStore.handle_svg_info.index, 1);
globalStore.done_json.push(temp_down_top);
globalStore.done_json.push(temp_up_top);
useHistoryRecord(globalStore.done_json);
this.display = false;
globalStore.setHandleSvgInfo(temp_up_top, globalStore.done_json.length - 1);
break;
default:
break;
Expand Down
15 changes: 15 additions & 0 deletions src/store/system/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,18 @@ export enum EContextMenuInfoType {
MoveUpTopLevel = 'MoveUpTopLevel',
MoveDownTopLevel = 'MoveDownTopLevel'
}

export enum EShortcutKeyType {
Copy = 'Copy',
Delete = 'Delete',
MoveUpOneLevel = 'MoveUpOneLevel',
MoveDownOneLevel = 'MoveDownOneLevel',
MoveUpTopLevel = 'MoveUpTopLevel',
MoveDownTopLevel = 'MoveDownTopLevel',
Redo = 'Redo',
Undo = 'Undo',
MoveUp = 'MoveUp',
MoveDown = 'MoveDown',
MoveLeft = 'MoveLeft',
MoveRight = 'MoveRight'
}

0 comments on commit 5ffbf87

Please sign in to comment.