Commit 155b97b6 authored by Michael Vrána's avatar Michael Vrána

useAlgorithmDelete, algorithm delete button

parent df52480d
Pipeline #80147 passed with stages
in 4 minutes and 3 seconds
......@@ -4,7 +4,8 @@ import { makeStyles, Paper } from '@material-ui/core'
import {
Close as CloseIcon,
Undo as UndoIcon,
Redo as RedoIcon
Redo as RedoIcon,
Delete as DeleteIcon
} from '@material-ui/icons'
import { CanvasToolbar } from '../../Toolbar/CanvasToolbar'
import { ReduxState } from '../../../reducers'
......@@ -17,6 +18,7 @@ import ElementButton from '../../Toolbar/ElementButton'
import { Actions } from '../../../reducers'
import { useAlgorithmExport } from '../../../hooks/useAlgorithmExport'
import { useAlgorithmImport } from '../../../hooks/useAlgorithmImport'
import { useAlgorithmDelete } from '../../../hooks/useAlgorithmDelete'
const { toggleGrid, setCursorMode, zoom } = algorithmCanvasActions
const { clear } = algorithmDataActions
......@@ -51,13 +53,18 @@ const useStyles = makeStyles((theme) => ({
export const AlgorithmCanvasToolbar = () => {
const dispatch = useDispatch()
const classes = useStyles()
const { cursorMode, gridOn } = useSelector(
const { cursorMode, gridOn, elementSelected } = useSelector(
(state: ReduxState) => ({
cursorMode: state.algorithmCanvas.cursorMode,
gridOn: state.algorithmCanvas.gridOn
gridOn: state.algorithmCanvas.gridOn,
elementSelected:
state.algorithmCanvas.selectedNode ||
state.algorithmCanvas.selectedEdge
})
)
const handleDelete = useAlgorithmDelete()
const handleSelectCursorModeFactory = useCallback(
(cursorMode: CursorMode) => () => dispatch(setCursorMode(cursorMode)),
[dispatch]
......@@ -90,6 +97,14 @@ export const AlgorithmCanvasToolbar = () => {
return (
<div className={classes.root}>
<Paper>
<ElementButton
Icon={DeleteIcon}
label="Delete selected"
isDisabled={!elementSelected}
onAction={handleDelete}
/>
</Paper>
<CanvasToolbar
cursorMode={cursorMode}
gridOn={gridOn}
......
import { useCallback } from 'react'
import { useDispatch, useSelector, batch } from 'react-redux'
import { ReduxState } from '../reducers'
import { algorithmDataActions } from '../reducers/algorithmData'
const { deleteNode, deleteEdge } = algorithmDataActions
export const useAlgorithmDelete = () => {
const dispatch = useDispatch()
const { selectedNode, selectedEdge } = useSelector((state: ReduxState) => ({
selectedNode: state.algorithmCanvas.selectedNode,
selectedEdge: state.algorithmCanvas.selectedEdge
}))
return useCallback(
() =>
batch(() => {
if (selectedNode) dispatch(deleteNode(selectedNode))
else if (selectedEdge) dispatch(deleteEdge(selectedEdge))
}),
[dispatch, selectedNode, selectedEdge]
)
}
......@@ -7,33 +7,21 @@ import { useEvaluate } from './useEvaluate'
import { algorithmCanvasActions } from '../reducers/algorithmCanvas'
import { useAlgorithmExport } from './useAlgorithmExport'
import { useAlgorithmImport } from './useAlgorithmImport'
import { useAlgorithmDelete } from './useAlgorithmDelete'
const { toggleGrid, setCursorMode } = algorithmCanvasActions
const { deleteNode, deleteEdge, clear } = algorithmDataActions
const { clear } = algorithmDataActions
const { undoAlgorithm, redoAlgorithm, setAlgorithmToolbarOpen } = Actions
export const useAlgorithmKeybinds = () => {
const dispatch = useDispatch()
const {
selectedEdge,
selectedNode,
algorithmToolbarOpen
} = useSelector((state: ReduxState) => ({
selectedNode: state.algorithmCanvas.selectedNode,
selectedEdge: state.algorithmCanvas.selectedEdge,
algorithmToolbarOpen: state.algorithmUI.toolbarOpen,
algorithmData: state.algorithmData.present,
algorithmService: state.service.algorithmsService
algorithmToolbarOpen: state.algorithmUI.toolbarOpen
}))
const handleDelete = useCallback(
() =>
batch(() => {
if (selectedNode) dispatch(deleteNode(selectedNode))
if (selectedEdge) dispatch(deleteEdge(selectedEdge))
}),
[dispatch, selectedNode, selectedEdge]
)
const handleDelete = useAlgorithmDelete()
const evaluate = useEvaluate()
const handleExport = useAlgorithmExport()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment