修复流程图键盘事件
This commit is contained in:
@@ -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;
|
||||
// });
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user