You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

148 lines
4.2 KiB

import {safeGet} from '../utils';
import {localSave} from '../api';
import {Cell, Edge, Graph, Node} from '@antv/x6';
import {MIN_ZOOM, MAX_ZOOM, ZOOM_STEP} from './const';
interface Shortcut {
keys: string | string[];
handler: (flowChart: Graph) => void;
}
const shortcuts: {[key: string]: Shortcut} = {
save: {
keys: `meta + s`,
handler(flowChart: Graph) {
localSave({dsl: flowChart.toJSON()});
return false;
}
},
undo: {
keys: `meta + z`,
handler(flowChart: Graph) {
flowChart.undo();
return false;
}
},
redo: {
keys: `meta + shift + z`,
handler(flowChart: Graph) {
flowChart.redo();
return false;
}
},
zoomIn: {
keys: `meta + shift + \+`,
handler(flowChart: Graph) {
const nextZoom = (flowChart.zoom() + ZOOM_STEP).toPrecision(2);
flowChart.zoomTo(Number(nextZoom), {maxScale: MAX_ZOOM});
return false;
}
},
zoomOut: {
keys: `meta + shift + \-`,
handler(flowChart: Graph) {
const nextZoom = (flowChart.zoom() - ZOOM_STEP).toPrecision(2);
flowChart.zoomTo(Number(nextZoom), {minScale: MIN_ZOOM});
return false;
}
},
copy: {
keys: 'meta + c',
handler(flowChart: Graph) {
const cells = flowChart.getSelectedCells();
if (cells.length > 0) {
flowChart.copy(cells);
}
return false;
}
},
paste: {
keys: 'meta + v',
handler(flowChart: Graph) {
if (!flowChart.isClipboardEmpty()) {
const cells = flowChart.paste({offset: 32});
flowChart.cleanSelection();
flowChart.select(cells);
}
return false;
}
},
delete: {
keys: ['backspace', 'del'],
handler(flowChart: Graph) {
const toDelCells = flowChart.getSelectedCells();
const onEdgeDel = (edge: Edge) => {
const srcNode = edge.getSourceNode() as Node;
const isSrcNodeInDelCells = !!toDelCells.find(c => c === srcNode);
if(srcNode && srcNode.shape === 'imove-branch' && !isSrcNodeInDelCells) {
const portId = edge.getSourcePortId();
if(portId === 'right' || portId === 'bottom') {
const edgeLabel = safeGet(edge.getLabelAt(0), 'attrs.label.text', '');
srcNode.setPortProp(portId, 'attrs/text/text', edgeLabel);
}
}
};
toDelCells.forEach((cell: Cell) => {
if(cell.isEdge()) {
onEdgeDel(cell);
} else {
flowChart.getConnectedEdges(cell).forEach(onEdgeDel);
}
});
flowChart.removeCells(flowChart.getSelectedCells());
flowChart.trigger('toolBar:forceUpdate');
return false;
}
},
selectAll: {
keys: 'meta + a',
handler(flowChart: Graph) {
flowChart.select(flowChart.getCells());
return false;
}
},
bold: {
keys: 'meta + b',
handler(flowChart: Graph) {
const cells = flowChart.getSelectedCells();
if (cells.length > 0) {
const isAlreadyBold = safeGet(cells, '0.attrs.label.fontWeight', 'normal') === 'bold';
cells.forEach((cell) => {
cell.setAttrs({label: {fontWeight: isAlreadyBold ? 'normal' : 'bold'}});
});
flowChart.trigger('toolBar:forceUpdate');
}
return false;
}
},
italic: {
keys: 'meta + i',
handler(flowChart: Graph) {
const cells = flowChart.getSelectedCells();
if(cells.length > 0) {
const isAlreadyItalic = safeGet(cells, '0.attrs.label.fontStyle', 'normal') === 'italic';
cells.forEach((cell) => {
cell.setAttrs({label: {fontStyle: isAlreadyItalic ? 'normal' : 'italic'}});
});
flowChart.trigger('toolBar:forceUpdate');
}
return false;
}
},
underline: {
keys: 'meta + u',
handler(flowChart: Graph) {
const cells = flowChart.getSelectedCells();
if(cells.length > 0) {
const isAlreadyUnderline = safeGet(cells, '0.attrs.label.textDecoration', 'none') === 'underline';
cells.forEach((cell) => {
cell.setAttrs({label: {textDecoration: isAlreadyUnderline ? 'none' : 'underline'}});
});
flowChart.trigger('toolBar:forceUpdate');
}
return false;
}
}
};
export default shortcuts;