Commit 795a3643 authored by Michael Vrána's avatar Michael Vrána

Algorithm hints

parent df262c05
Pipeline #80180 passed with stages
in 4 minutes and 27 seconds
import React from 'react'
import { useSelector } from 'react-redux'
import { makeStyles } from '@material-ui/styles'
import { ReduxState } from '../../reducers'
import { Hints } from '../Hints'
const hints: string[][] = [
['Open/close sidebar', 'A'],
['Delete selected', 'Del'],
['Select mode', 'L'],
['Move mode', 'M'],
['Toggle grid', 'G'],
['Undo', 'Ctrl + Z'],
['Redo', 'Ctrl + Y'],
['Clear canvas', 'Ctrl + X'],
['Export', 'Ctrl + S'],
['Import', 'Ctrl + O'],
['Toggle hint', 'H']
]
const useStyles = makeStyles({
root: {
position: 'absolute',
bottom: '70px',
right: 0,
zIndex: 8,
pointerEvents: 'none',
marginRight: 8,
marginBottom: 8,
textAlign: 'right'
}
})
export const AlgorithmHints = () => {
const classes = useStyles()
const { showHint } = useSelector((state: ReduxState) => ({
showHint: state.algorithmUI.showHint
}))
if (!showHint) return null
return (
<div className={classes.root}>
<Hints hints={hints} />
</div>
)
}
......@@ -5,7 +5,8 @@ import {
Close as CloseIcon,
Undo as UndoIcon,
Redo as RedoIcon,
Delete as DeleteIcon
Delete as DeleteIcon,
Help as HelpIcon
} from '@material-ui/icons'
import { CanvasToolbar } from '../../Toolbar/CanvasToolbar'
import { ReduxState } from '../../../reducers'
......@@ -19,10 +20,12 @@ import { Actions } from '../../../reducers'
import { useAlgorithmExport } from '../../../hooks/useAlgorithmExport'
import { useAlgorithmImport } from '../../../hooks/useAlgorithmImport'
import { useAlgorithmDelete } from '../../../hooks/useAlgorithmDelete'
import { algorithmUIActions } from '../../../reducers/algorithmUI'
const { toggleGrid, setCursorMode, zoom } = algorithmCanvasActions
const { clear } = algorithmDataActions
const { undoAlgorithm, redoAlgorithm } = Actions
const { toggleHint } = algorithmUIActions
const useStyles = makeStyles((theme) => ({
root: {
......@@ -53,17 +56,21 @@ const useStyles = makeStyles((theme) => ({
export const AlgorithmCanvasToolbar = () => {
const dispatch = useDispatch()
const classes = useStyles()
const { cursorMode, gridOn, elementSelected, pastEmpty, futureEmpty } = useSelector(
(state: ReduxState) => ({
cursorMode: state.algorithmCanvas.cursorMode,
gridOn: state.algorithmCanvas.gridOn,
elementSelected:
state.algorithmCanvas.selectedNode ||
state.algorithmCanvas.selectedEdge,
pastEmpty: state.algorithmData.past.length === 0,
futureEmpty: state.algorithmData.future.length === 0
})
)
const {
cursorMode,
gridOn,
elementSelected,
pastEmpty,
futureEmpty
} = useSelector((state: ReduxState) => ({
cursorMode: state.algorithmCanvas.cursorMode,
gridOn: state.algorithmCanvas.gridOn,
elementSelected:
state.algorithmCanvas.selectedNode ||
state.algorithmCanvas.selectedEdge,
pastEmpty: state.algorithmData.past.length === 0,
futureEmpty: state.algorithmData.future.length === 0
}))
const handleDelete = useAlgorithmDelete()
......@@ -96,6 +103,7 @@ export const AlgorithmCanvasToolbar = () => {
const handleUndo = useCallback(() => dispatch(undoAlgorithm()), [dispatch])
const handleRedo = useCallback(() => dispatch(redoAlgorithm()), [dispatch])
const handleClear = useCallback(() => dispatch(clear()), [dispatch])
const handleToggleHint = useCallback(() => dispatch(toggleHint()), [dispatch])
return (
<div className={classes.root}>
......@@ -139,6 +147,13 @@ export const AlgorithmCanvasToolbar = () => {
onExport={handleExport}
onImport={handleImport}
/>
<Paper>
<ElementButton
Icon={HelpIcon}
label="Toggle hint"
onAction={handleToggleHint}
/>
</Paper>
</div>
)
}
......@@ -9,6 +9,7 @@ import { AlgorithmDrawer } from './AlgorithmDrawer'
import { WebUITheme } from '../../../interfaces/Theme'
import { AlgorithmCanvasToolbar } from './AlgorithmCanvasToolbar'
import { StringDialog } from '../Dialog/StringDialog'
import { AlgorithmHints } from '../AlgorithmHints'
const useStyles = makeStyles<WebUITheme>((theme) => ({
root: {
......@@ -42,6 +43,7 @@ const AlgorithmToolbar = () => {
<DotDialog />
<EvaluatingDialog />
<AlgorithmCanvasToolbar />
<AlgorithmHints />
</div>
)
}
......
......@@ -8,9 +8,11 @@ import { algorithmCanvasActions } from '../reducers/algorithmCanvas'
import { useAlgorithmExport } from './useAlgorithmExport'
import { useAlgorithmImport } from './useAlgorithmImport'
import { useAlgorithmDelete } from './useAlgorithmDelete'
import { algorithmUIActions } from '../reducers/algorithmUI'
const { toggleGrid, setCursorMode } = algorithmCanvasActions
const { clear } = algorithmDataActions
const { toggleHint } = algorithmUIActions
const { undoAlgorithm, redoAlgorithm, setAlgorithmToolbarOpen } = Actions
export const useAlgorithmKeybinds = () => {
......@@ -66,6 +68,9 @@ export const useAlgorithmKeybinds = () => {
case 'x':
if (e.ctrlKey) dispatch(clear())
break
case 'h':
dispatch(toggleHint())
break
}
},
[dispatch, handleDelete, algorithmToolbarOpen, evaluate, handleImport, handleExport]
......
import { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { algorithmUIActions } from '../reducers/algorithmUI'
const { toggleHint } = algorithmUIActions
export const useAlgorithmToggleHint = () => {
const dispatch = useDispatch()
return useCallback(() => dispatch(toggleHint()), [dispatch])
}
......@@ -25,6 +25,7 @@ export interface AlgorithmUIState {
initialValue: any
editedNodeId: string
}
showHint: boolean
}
export const initialAlgorithmUIState: AlgorithmUIState = {
......@@ -57,7 +58,8 @@ export const initialAlgorithmUIState: AlgorithmUIState = {
open: false,
initialValue: '',
editedNodeId: ''
}
},
showHint: true
}
export const algorithmUIActions = {
......@@ -96,7 +98,9 @@ export const algorithmUIActions = {
openInputDialog: (editedNodeId: string, initialValue: any = '') =>
createAction('openInputDialog', { editedNodeId, initialValue }),
closeInputDialog: () => createAction('closeInputDialog')
closeInputDialog: () => createAction('closeInputDialog'),
toggleHint: () => createAction('toggleHint')
}
export type AlgorithmUIActions = ActionsUnion<
......@@ -196,6 +200,12 @@ export const algorithmUIReducer = (
toolbarOpen: true
}
}
case 'toggleHint': {
return {
...state,
showHint: !state.showHint
}
}
default:
return state
}
......
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