|
@ -10,41 +10,41 @@ interface Shortcut { |
|
|
|
|
|
|
|
|
const shortcuts: { [key: string]: Shortcut } = { |
|
|
const shortcuts: { [key: string]: Shortcut } = { |
|
|
save: { |
|
|
save: { |
|
|
keys: `meta + s`, |
|
|
keys: 'meta + s', |
|
|
handler(flowChart: Graph) { |
|
|
handler(flowChart: Graph) { |
|
|
localSave({ dsl: flowChart.toJSON() }); |
|
|
localSave({ dsl: flowChart.toJSON() }); |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
undo: { |
|
|
undo: { |
|
|
keys: `meta + z`, |
|
|
keys: 'meta + z', |
|
|
handler(flowChart: Graph) { |
|
|
handler(flowChart: Graph) { |
|
|
flowChart.undo(); |
|
|
flowChart.undo(); |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
redo: { |
|
|
redo: { |
|
|
keys: `meta + shift + z`, |
|
|
keys: 'meta + shift + z', |
|
|
handler(flowChart: Graph) { |
|
|
handler(flowChart: Graph) { |
|
|
flowChart.redo(); |
|
|
flowChart.redo(); |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
zoomIn: { |
|
|
zoomIn: { |
|
|
keys: `meta + shift + \+`, |
|
|
keys: 'meta + shift + +', |
|
|
handler(flowChart: Graph) { |
|
|
handler(flowChart: Graph) { |
|
|
const nextZoom = (flowChart.zoom() + ZOOM_STEP).toPrecision(2); |
|
|
const nextZoom = (flowChart.zoom() + ZOOM_STEP).toPrecision(2); |
|
|
flowChart.zoomTo(Number(nextZoom), { maxScale: MAX_ZOOM }); |
|
|
flowChart.zoomTo(Number(nextZoom), { maxScale: MAX_ZOOM }); |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
zoomOut: { |
|
|
zoomOut: { |
|
|
keys: `meta + shift + \-`, |
|
|
keys: 'meta + shift + -', |
|
|
handler(flowChart: Graph) { |
|
|
handler(flowChart: Graph) { |
|
|
const nextZoom = (flowChart.zoom() - ZOOM_STEP).toPrecision(2); |
|
|
const nextZoom = (flowChart.zoom() - ZOOM_STEP).toPrecision(2); |
|
|
flowChart.zoomTo(Number(nextZoom), { minScale: MIN_ZOOM }); |
|
|
flowChart.zoomTo(Number(nextZoom), { minScale: MIN_ZOOM }); |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
copy: { |
|
|
copy: { |
|
|
keys: 'meta + c', |
|
|
keys: 'meta + c', |
|
@ -54,7 +54,7 @@ const shortcuts: {[key: string]: Shortcut} = { |
|
|
flowChart.copy(cells); |
|
|
flowChart.copy(cells); |
|
|
} |
|
|
} |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
paste: { |
|
|
paste: { |
|
|
keys: 'meta + v', |
|
|
keys: 'meta + v', |
|
@ -65,7 +65,7 @@ const shortcuts: {[key: string]: Shortcut} = { |
|
|
flowChart.select(cells); |
|
|
flowChart.select(cells); |
|
|
} |
|
|
} |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
delete: { |
|
|
delete: { |
|
|
keys: ['backspace', 'del'], |
|
|
keys: ['backspace', 'del'], |
|
@ -73,7 +73,7 @@ const shortcuts: {[key: string]: Shortcut} = { |
|
|
const toDelCells = flowChart.getSelectedCells(); |
|
|
const toDelCells = flowChart.getSelectedCells(); |
|
|
const onEdgeDel = (edge: Edge) => { |
|
|
const onEdgeDel = (edge: Edge) => { |
|
|
const srcNode = edge.getSourceNode() as Node; |
|
|
const srcNode = edge.getSourceNode() as Node; |
|
|
const isSrcNodeInDelCells = !!toDelCells.find(c => c === srcNode); |
|
|
const isSrcNodeInDelCells = !!toDelCells.find((c) => c === srcNode); |
|
|
if (srcNode && srcNode.shape === 'imove-branch' && !isSrcNodeInDelCells) { |
|
|
if (srcNode && srcNode.shape === 'imove-branch' && !isSrcNodeInDelCells) { |
|
|
const portId = edge.getSourcePortId(); |
|
|
const portId = edge.getSourcePortId(); |
|
|
if (portId === 'right' || portId === 'bottom') { |
|
|
if (portId === 'right' || portId === 'bottom') { |
|
@ -92,14 +92,14 @@ const shortcuts: {[key: string]: Shortcut} = { |
|
|
flowChart.removeCells(flowChart.getSelectedCells()); |
|
|
flowChart.removeCells(flowChart.getSelectedCells()); |
|
|
flowChart.trigger('toolBar:forceUpdate'); |
|
|
flowChart.trigger('toolBar:forceUpdate'); |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
selectAll: { |
|
|
selectAll: { |
|
|
keys: 'meta + a', |
|
|
keys: 'meta + a', |
|
|
handler(flowChart: Graph) { |
|
|
handler(flowChart: Graph) { |
|
|
flowChart.select(flowChart.getCells()); |
|
|
flowChart.select(flowChart.getCells()); |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
bold: { |
|
|
bold: { |
|
|
keys: 'meta + b', |
|
|
keys: 'meta + b', |
|
@ -113,7 +113,7 @@ const shortcuts: {[key: string]: Shortcut} = { |
|
|
flowChart.trigger('toolBar:forceUpdate'); |
|
|
flowChart.trigger('toolBar:forceUpdate'); |
|
|
} |
|
|
} |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
italic: { |
|
|
italic: { |
|
|
keys: 'meta + i', |
|
|
keys: 'meta + i', |
|
@ -127,22 +127,23 @@ const shortcuts: {[key: string]: Shortcut} = { |
|
|
flowChart.trigger('toolBar:forceUpdate'); |
|
|
flowChart.trigger('toolBar:forceUpdate'); |
|
|
} |
|
|
} |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
underline: { |
|
|
underline: { |
|
|
keys: 'meta + u', |
|
|
keys: 'meta + u', |
|
|
handler(flowChart: Graph) { |
|
|
handler(flowChart: Graph) { |
|
|
const cells = flowChart.getSelectedCells(); |
|
|
const cells = flowChart.getSelectedCells(); |
|
|
if (cells.length > 0) { |
|
|
if (cells.length > 0) { |
|
|
const isAlreadyUnderline = safeGet(cells, '0.attrs.label.textDecoration', 'none') === 'underline'; |
|
|
const isAlreadyUnderline = |
|
|
|
|
|
safeGet(cells, '0.attrs.label.textDecoration', 'none') === 'underline'; |
|
|
cells.forEach((cell) => { |
|
|
cells.forEach((cell) => { |
|
|
cell.setAttrs({ label: { textDecoration: isAlreadyUnderline ? 'none' : 'underline' } }); |
|
|
cell.setAttrs({ label: { textDecoration: isAlreadyUnderline ? 'none' : 'underline' } }); |
|
|
}); |
|
|
}); |
|
|
flowChart.trigger('toolBar:forceUpdate'); |
|
|
flowChart.trigger('toolBar:forceUpdate'); |
|
|
} |
|
|
} |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export default shortcuts; |
|
|
export default shortcuts; |
|
|