修复流程图键盘事件

This commit is contained in:
weibl
2025-11-25 15:02:50 +08:00
parent 2d2fcaa539
commit 80812b0bbf

View File

@@ -1,44 +1,103 @@
export const keyboardEvents = (graph:any) => {
graph.bindKey('ctrl+c', () => {
const cells = graph.getSelectedCells();
if (cells.length) {
graph.copy(cells);
window.addEventListener('keydown', (e) => {
console.log('e', e);
keyDownFun(e);
});
window.addEventListener('keyup', (e) => {
keyUpFun(e);
});
const keyDownFun = (event: KeyboardEvent) => {
// 2. 阻止浏览器的默认保存行为
// 判断是否按下了 Ctrl + c (Windows) 或 Cmd + c (Mac)
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
// ctrl+c
const cells = graph.getSelectedCells();
if (cells.length) {
graph.copy(cells);
}
event.preventDefault();
}
return false;
});
graph.bindKey('ctrl+v', () => {
if (!graph.isClipboardEmpty()) {
const cells = graph.paste({ offset: 20 });
graph.cleanSelection();
graph.select(cells);
// 判断是否按下了 Ctrl + v (Windows) 或 Cmd + v (Mac)
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') {
// ctrl+v
if (!graph.isClipboardEmpty()) {
const cells = graph.paste({ offset: 20 });
graph.cleanSelection();
graph.select(cells);
}
event.preventDefault();
}
return false;
});
graph.bindKey('ctrl+z', () => {
graph.undo();
return false;
});
graph.bindKey('space', () => {
graph.enablePanning();
graph.disableSelection();
return false;
}, 'keydown');
graph.bindKey('space', () => {
graph.disablePanning();
graph.enableSelection();
return false;
}, 'keyup');
graph.bindKey(['delete', 'backspace'], () => {
const cells = graph.getSelectedCells();
console.log('cells', cells);
if (cells.length) {
graph.removeCells(cells);
// 判断是否按下了 Ctrl + z (Windows) 或 Cmd + z (Mac)
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
// ctrl+z
graph.undo();
event.preventDefault();
}
return false;
});
// 判断是否按下了空格键
if ( event.key.toLowerCase() === ' ') {
console.log('space keyDownFun');
graph.enablePanning();
graph.disableSelection();
event.preventDefault();
}
if ( event.key.toLowerCase() === 'delete' || event.key.toLowerCase() === 'backspace') {
const cells = graph.getSelectedCells();
console.log('cells', cells);
if (cells.length) {
graph.removeCells(cells);
}
event.preventDefault();
}
};
const keyUpFun = (event: KeyboardEvent) => {
// 判断是否按下了空格键
if ( event.key.toLowerCase() === ' ') {
console.log('space keyUpFun');
graph.disablePanning();
graph.enableSelection();
}
};
// graph.bindKey('ctrl+c', () => {
// const cells = graph.getSelectedCells();
// if (cells.length) {
// graph.copy(cells);
// }
// return false;
// });
// graph.bindKey('ctrl+v', () => {
// if (!graph.isClipboardEmpty()) {
// const cells = graph.paste({ offset: 20 });
// graph.cleanSelection();
// graph.select(cells);
// }
// return false;
// });
// graph.bindKey('ctrl+z', () => {
// graph.undo();
// return false;
// });
// graph.bindKey('space', () => {
// console.log('space');
// graph.enablePanning();
// graph.disableSelection();
// return false;
// }, 'keydown');
// graph.bindKey('space', () => {
// graph.disablePanning();
// graph.enableSelection();
// return false;
// }, 'keyup');
// graph.bindKey(['delete', 'backspace'], () => {
// const cells = graph.getSelectedCells();
// console.log('cells', cells);
// if (cells.length) {
// graph.removeCells(cells);
// }
// return false;
// });
};