Commit bedc804d authored by Michael Vrána's avatar Michael Vrána

Renamed toolbars reducers to UI reducers

parent 2bb5b508
Pipeline #80109 passed with stages
in 4 minutes and 36 seconds
......@@ -30,10 +30,10 @@ function GhostStateContainer(props: GhostStateProps) {
const { stateNameId, show, data, type } = useSelector(
(state: ReduxState) => ({
stateNameId: state.toolbar.stateNameId,
show: state.toolbar.buildState,
data: state.toolbar.ghostState,
type: state.toolbar.buildStateType || 'default'
stateNameId: state.stateUI.stateNameId,
show: state.stateUI.buildState,
data: state.stateUI.ghostState,
type: state.stateUI.buildStateType || 'default'
})
)
......
......@@ -20,7 +20,7 @@ function GhostTransitionContainer(props: GhostTransitionProps) {
const { canvasRef } = props
const { data, startState, buildTransition } = useSelector(
(state: ReduxState) => {
const transition = state.toolbar.ghostTransition
const transition = state.stateUI.ghostTransition
// Find the correct start state
const startState = transition
? state.stateData.present.states[transition.startState]
......@@ -29,10 +29,10 @@ function GhostTransitionContainer(props: GhostTransitionProps) {
return {
data: {
...transition,
name: transition.name + state.toolbar.transitionNameId
name: transition.name + state.stateUI.transitionNameId
},
startState,
buildTransition: state.toolbar.buildTransition
buildTransition: state.stateUI.buildTransition
}
}
)
......
......@@ -55,10 +55,10 @@ const stateSelector = (id: string) => (state: ReduxState) => {
state.stateData.present.states,
state.stateData.present.states[id]
),
buildTransition: state.toolbar.buildTransition,
buildTransition: state.stateUI.buildTransition,
selectedTransition: state.stateCanvas.selectedEdge,
ghostTransition: state.toolbar.ghostTransition,
transitionNameId: state.toolbar.transitionNameId,
ghostTransition: state.stateUI.ghostTransition,
transitionNameId: state.stateUI.transitionNameId,
cursorMode: state.stateCanvas.cursorMode,
positioningState: state.stateCanvas.positioningNode
}
......
......@@ -70,7 +70,7 @@ function StateOverlay(props: Props) {
const dispatch = useDispatch()
const classes = useStyles()
const { transitionName } = useSelector(
({ toolbar: { ghostTransition, transitionNameId } }: ReduxState) => ({
({ stateUI: { ghostTransition, transitionNameId } }: ReduxState) => ({
transitionName: ghostTransition.name + transitionNameId,
})
)
......
......@@ -28,7 +28,7 @@ function Confirm() {
const classes = useStyles()
const { text } = useSelector(
(state: ReduxState) => ({
text: state.toolbar.confirmText
text: state.stateUI.confirmText
})
)
......
......@@ -78,7 +78,7 @@ function ExploreDialog() {
const [toggle, setToggle] = React.useState(showStorage)
const { show } = useSelector(
(state: ReduxState) => ({
show: state.toolbar.showExplore,
show: state.stateUI.showExplore,
data: state.stateData.present
})
)
......
......@@ -113,9 +113,9 @@ function Hint() {
selectedTransition
} = useSelector(
(state: ReduxState) => ({
showHint: state.toolbar.showHint,
buildState: state.toolbar.buildState,
buildTransition: state.toolbar.buildTransition,
showHint: state.stateUI.showHint,
buildState: state.stateUI.buildState,
buildTransition: state.stateUI.buildTransition,
selectedState: state.stateCanvas.selectedNode,
selectedTransition: state.stateCanvas.selectedEdge
})
......
......@@ -26,10 +26,10 @@ const StateCanvas = () => {
} = useSelector((state: ReduxState) => ({
states: state.stateData.present.states,
transitions: state.stateData.present.transitions,
ghostState: state.toolbar.ghostState,
ghostTransition: state.toolbar.ghostTransition,
stateNameId: state.toolbar.stateNameId,
transitionNameId: state.toolbar.transitionNameId,
ghostState: state.stateUI.ghostState,
ghostTransition: state.stateUI.ghostTransition,
stateNameId: state.stateUI.stateNameId,
transitionNameId: state.stateUI.transitionNameId,
showGrid: state.stateCanvas.gridOn,
scale: state.stateCanvas.scale,
offset: state.stateCanvas.offset
......
......@@ -11,13 +11,13 @@ import {
import DoneIcon from '@material-ui/icons/Done'
import CloseIcon from '@material-ui/icons/Close'
import Statemaker from './Statemaker'
import { algorithmToolbarActions } from '../../reducers/algorithmToolbar'
import { algorithmUIActions } from '../../reducers/algorithmUI'
import { algorithmDataActions } from '../../reducers/algorithmData'
import useStatemakerKeyBindings from '../../hooks/useStatemakerKeyBindings'
import { WebUITheme } from '../../interfaces/Theme'
const { setInputAutomaton } = algorithmDataActions
const { setStatemakerOpen } = algorithmToolbarActions
const { setStatemakerOpen } = algorithmUIActions
const useStyles = makeStyles<WebUITheme>((theme) => ({
dialogContentRoot: {
......@@ -70,12 +70,12 @@ const StatemakerDialog = () => {
stateData,
showApplyButton,
} = useSelector((state: ReduxState) => ({
statemakerOpen: state.algorithmToolbar.statemakerOpen,
statemakerOpen: state.algorithmUI.statemakerOpen,
editedNode: state.algorithmData.present.nodes.get(
state.algorithmCanvas.selectedNode
),
stateData: state.stateData.present,
showApplyButton: state.algorithmToolbar.showStatemakerApplyButton,
showApplyButton: state.algorithmUI.showStatemakerApplyButton,
}))
const handleDialogClose = useCallback(
......
......@@ -15,7 +15,7 @@ function Errors() {
(state: ReduxState) => ({
canvas: state.stateCanvas,
data: state.stateData.present,
toolbarErrors: state.toolbar.errors
toolbarErrors: state.stateUI.errors
})
)
const errors = [...getErrors(data, canvas), ...toolbarErrors]
......
......@@ -86,7 +86,7 @@ function TextInput() {
const state = useSelector((state: ReduxState) => ({
selectedState: state.stateCanvas.selectedNode,
selectedTransition: state.stateCanvas.selectedEdge,
input: state.toolbar.input,
input: state.stateUI.input,
initialStates: state.stateData.present.initialStates,
finalStates: state.stateData.present.finalStates
}))
......
......@@ -18,7 +18,7 @@ function PositionButton() {
const dispatch = useDispatch()
const { algorithm } = useSelector(
(state: ReduxState) => ({
algorithm: state.toolbar.algorithm
algorithm: state.stateUI.algorithm
})
)
......
......@@ -17,7 +17,7 @@ function SetAlgorithmButton() {
const dispatch = useDispatch()
const { algorithm } = useSelector(
(state: ReduxState) => ({
algorithm: state.toolbar.algorithm
algorithm: state.stateUI.algorithm
})
)
......
......@@ -29,8 +29,8 @@ function StateButton(props: Props) {
const { selected } = useSelector(
(state: ReduxState) => ({
selected:
state.toolbar.buildState &&
state.toolbar.buildStateType === variant
state.stateUI.buildState &&
state.stateUI.buildStateType === variant
})
)
......
......@@ -94,7 +94,7 @@ function StatemakerToolbar() {
const { cursorMode, grid, algorithm } = useSelector((state: ReduxState) => ({
cursorMode: state.stateCanvas.cursorMode,
grid: state.stateCanvas.gridOn,
algorithm: state.toolbar.algorithm
algorithm: state.stateUI.algorithm
}))
const handleSetCursorModeFactory = React.useCallback(
......
......@@ -17,7 +17,7 @@ function TransitionButton() {
const dispatch = useDispatch()
const { selected } = useSelector(
(state: ReduxState) => ({
selected: state.toolbar.buildTransition
selected: state.stateUI.buildTransition
})
)
......
......@@ -23,7 +23,7 @@ const GhostEdgeContainer = (props: GhostEdgeContainerProps) => {
const { canvasRef } = props
const { data, startNode, endNode, buildEdge } = useSelector(
(state: ReduxState) => {
const ghostEdge = state.algorithmToolbar.ghostEdge
const ghostEdge = state.algorithmUI.ghostEdge
const nodes = state.algorithmData.present.nodes
return {
......
......@@ -35,7 +35,7 @@ function GhostNodeContainer(props: GhostNodeProps) {
const { show, data } = useSelector((state: ReduxState) => ({
show: state.algorithmCanvas.buildNode,
data: state.algorithmToolbar.ghostNode,
data: state.algorithmUI.ghostNode,
}))
const position = useAlgorithmPosition(canvasRef, show)
......
......@@ -25,7 +25,7 @@ const ParamNodeContainer = (props: ParamNodeContainerProps) => {
const { edges, ghostEdge, buildEdge, hasError, cursorMode } = useSelector(
(state: ReduxState) => ({
edges: state.algorithmData.present.edges,
ghostEdge: state.algorithmToolbar.ghostEdge,
ghostEdge: state.algorithmUI.ghostEdge,
buildEdge: state.algorithmCanvas.buildEdge,
hasError: state.algorithmData.present.incompatibleEdges.some(
(edge) =>
......
......@@ -18,9 +18,9 @@ import { Close as CloseIcon } from '@material-ui/icons'
import { useSnackbar } from 'notistack'
import { saveAs } from 'file-saver'
import { ReduxState } from '../../../reducers'
import { algorithmToolbarActions } from '../../../reducers/algorithmToolbar'
import { algorithmUIActions } from '../../../reducers/algorithmUI'
const { setDotDialogOpen } = algorithmToolbarActions
const { setDotDialogOpen } = algorithmUIActions
const useStyles = makeStyles({
dialogTitle: {
......@@ -61,8 +61,8 @@ export const DotDialog = () => {
const classes = useStyles()
const dispatch = useDispatch()
const { open, dotContent } = useSelector((state: ReduxState) => ({
open: state.algorithmToolbar.dotDialogOpen,
dotContent: state.algorithmToolbar.dotDialogContent
open: state.algorithmUI.dotDialogOpen,
dotContent: state.algorithmUI.dotDialogContent
}))
const { enqueueSnackbar } = useSnackbar()
......
......@@ -19,7 +19,7 @@ const useStyles = makeStyles({
export const EvaluatingDialog = () => {
const { open } = useSelector((state: ReduxState) => ({
open: state.algorithmToolbar.evaluatingDialogOpen,
open: state.algorithmUI.evaluatingDialogOpen,
}))
const classes = useStyles()
......
......@@ -18,10 +18,10 @@ import {
} from '@material-ui/core'
import CloseIcon from '@material-ui/icons/Close'
import { ReduxState } from '../../../reducers'
import { algorithmToolbarActions } from '../../../reducers/algorithmToolbar'
import { algorithmUIActions } from '../../../reducers/algorithmUI'
import { algorithmDataActions } from '../../../reducers/algorithmData'
const { closeInputDialog } = algorithmToolbarActions
const { closeInputDialog } = algorithmUIActions
const {
setInputString,
setInputNumber: setInputInt,
......@@ -76,10 +76,10 @@ const InputDialog = () => {
const { open, initialValue, editedNode } = useSelector(
(state: ReduxState) => ({
open: state.algorithmToolbar.inputDialog.open,
initialValue: state.algorithmToolbar.inputDialog.initialValue,
open: state.algorithmUI.inputDialog.open,
initialValue: state.algorithmUI.inputDialog.initialValue,
editedNode: state.algorithmData.present.nodes.get(
state.algorithmToolbar.inputDialog.editedNodeId
state.algorithmUI.inputDialog.editedNodeId
)
})
)
......
......@@ -12,9 +12,9 @@ import {
} from '@material-ui/core'
import CloseIcon from '@material-ui/icons/Close'
import { ReduxState } from '../../../reducers'
import { algorithmToolbarActions } from '../../../reducers/algorithmToolbar'
import { algorithmUIActions } from '../../../reducers/algorithmUI'
const { setStringDialogOpen } = algorithmToolbarActions
const { setStringDialogOpen } = algorithmUIActions
const useStyles = makeStyles({
dialogPaper: {
......@@ -44,8 +44,8 @@ export const StringDialog = () => {
)
const { open, content } = useSelector((state: ReduxState) => ({
open: state.algorithmToolbar.stringDialogOpen,
content: state.algorithmToolbar.stringDialogContent
open: state.algorithmUI.stringDialogOpen,
content: state.algorithmUI.stringDialogContent
}))
const handleClose = useCallback(
......
......@@ -15,13 +15,13 @@ import {
import { batch, useDispatch, useSelector } from 'react-redux'
import AlgorithmList from './AlgorithmList/AlgorithmList'
import { algorithmCanvasActions } from '../../../reducers/algorithmCanvas'
import { algorithmToolbarActions } from '../../../reducers/algorithmToolbar'
import { algorithmUIActions } from '../../../reducers/algorithmUI'
import { ReduxState } from '../../../reducers'
import { AlgorithmNodeType, AlgorithmNodeValue } from '../../../interfaces/AlgorithmNode'
import { AlibType, AlgorithmParam } from '../../../interfaces/Algorithms'
const { setBuildNode } = algorithmCanvasActions
const { updateGhostNode, setAlgorithmToolbarOpen } = algorithmToolbarActions
const { updateGhostNode, setAlgorithmToolbarOpen } = algorithmUIActions
const useStyles = makeStyles<WebUITheme>((theme) => ({
drawer: {
......@@ -38,7 +38,7 @@ export const AlgorithmDrawer = () => {
const { toolbarOpen } = useSelector((state: ReduxState) => ({
algorithmService: state.service.algorithmsService,
toolbarOpen: state.algorithmToolbar.toolbarOpen,
toolbarOpen: state.algorithmUI.toolbarOpen,
}))
const drawerClassNames = useMemo(() => ({ paper: classes.drawerPaper }), [
......
......@@ -14,11 +14,11 @@ import AlgorithmCanvas from '../AlgorithmCanvas'
import AlgorithmToolbar from './Toolbar/AlgorithmToolbar'
import { useDispatch, useSelector } from 'react-redux'
import { ReduxState } from '../../reducers'
import { algorithmToolbarActions } from '../../reducers/algorithmToolbar'
import { algorithmUIActions } from '../../reducers/algorithmUI'
import { WebUITheme } from '../../interfaces/Theme'
import { useAlgorithmKeybinds } from '../../hooks/useAlgorithmKeybinds'
const { setAlgorithmToolbarOpen } = algorithmToolbarActions
const { setAlgorithmToolbarOpen } = algorithmUIActions
// styles based on https://material-ui.com/components/drawers/#PersistentDrawerLeft.tsx
const useStyles = makeStyles<WebUITheme>((theme) => ({
......@@ -49,7 +49,7 @@ const useStyles = makeStyles<WebUITheme>((theme) => ({
export const WebUI = () => {
const dispatch = useDispatch()
const { toolbarOpen } = useSelector((state: ReduxState) => ({
toolbarOpen: state.algorithmToolbar.toolbarOpen
toolbarOpen: state.algorithmUI.toolbarOpen
}))
const classes = useStyles()
......
......@@ -19,7 +19,7 @@ export const useAlgorithmKeybinds = () => {
} = useSelector((state: ReduxState) => ({
selectedNode: state.algorithmCanvas.selectedNode,
selectedEdge: state.algorithmCanvas.selectedEdge,
algorithmToolbarOpen: state.algorithmToolbar.toolbarOpen,
algorithmToolbarOpen: state.algorithmUI.toolbarOpen,
algorithmData: state.algorithmData.present,
algorithmService: state.service.algorithmsService
}))
......
import * as React from 'react'
import Position, { snap, add, modX } from '../interfaces/Position'
import { MouseMode } from '../reducers/toolbar'
import { MouseMode } from '../reducers/stateUI'
import { cursorPositionOnCanvas } from '../utils/positioning'
const GRID_SIZE = 25
......
import { useCallback } from 'react'
import { batch, useDispatch, useSelector } from 'react-redux'
import { Map } from 'immutable'
import { algorithmToolbarActions } from '../reducers/algorithmToolbar'
import { algorithmUIActions } from '../reducers/algorithmUI'
import { algorithmDataActions } from '../reducers/algorithmData'
import { ReduxState } from '../reducers'
import { useSnackbar } from 'notistack'
const { setOutputValues } = algorithmDataActions
const { setEvaluatingDialogOpen } = algorithmToolbarActions
const { setEvaluatingDialogOpen } = algorithmUIActions
export const useEvaluate = () => {
const dispatch = useDispatch()
......
......@@ -2,7 +2,7 @@ import * as React from 'react'
import useCursor from '../hooks/useCursor'
import Position, { round, normalize } from '../interfaces/Position'
import { MouseMode } from '../reducers/toolbar'
import { MouseMode } from '../reducers/stateUI'
/**
* Cursor position relative to application scale and offset
......
......@@ -6,7 +6,7 @@ import { ReduxState } from '../reducers'
const useStatePosition = (canvas: React.RefObject<SVGSVGElement>, allowChange: boolean) => {
const { mouseMode, grid, scale, offset } = useSelector((state: ReduxState) => ({
mouseMode: state.toolbar.mouseMode,
mouseMode: state.stateUI.mouseMode,
grid: state.stateCanvas.gridOn,
scale: state.stateCanvas.scale,
offset: state.stateCanvas.offset
......
......@@ -32,12 +32,12 @@ const useKeyBindings = () => {
const dispatch = useDispatch()
const state = useSelector((state: ReduxState) => ({
algorithm: state.toolbar.algorithm,
mouseMode: state.toolbar.mouseMode,
algorithm: state.stateUI.algorithm,
mouseMode: state.stateUI.mouseMode,
selectedState: state.stateCanvas.selectedNode,
selectedTransition: state.stateCanvas.selectedEdge,
buildState: state.toolbar.buildState,
buildTransition: state.toolbar.buildTransition,
buildState: state.stateUI.buildState,
buildTransition: state.stateUI.buildTransition,
data: state.stateData.present,
}))
......
import reducer, { initialState, Actions, State } from '../toolbar'
import reducer, { initialStateUIState, stateUIActions, State } from '../stateUI'
describe('toolbar reducer', () => {
it('sets input', () => {
expect(reducer(initialState, Actions.setInput('x'))).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.setInput('x'))).toEqual({
...initialStateUIState,
input: 'x'
} as State)
})
it('sets algorithm', () => {
expect(reducer(initialState, Actions.setAlgorithm('force'))).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.setAlgorithm('force'))).toEqual({
...initialStateUIState,
algorithm: 'force'
} as State)
})
it('resets input', () => {
expect(reducer(initialState, Actions.resetInput())).toEqual(
initialState
expect(reducer(initialStateUIState, stateUIActions.resetInput())).toEqual(
initialStateUIState
)
})
......@@ -25,13 +25,13 @@ describe('toolbar reducer', () => {
expect(
reducer(
{
...initialState,
...initialStateUIState,
errors: ['x']
},
Actions.addError('err')
stateUIActions.addError('err')
)
).toEqual({
...initialState,
...initialStateUIState,
errors: ['x', 'err']
} as State)
})
......@@ -40,13 +40,13 @@ describe('toolbar reducer', () => {
expect(
reducer(
{
...initialState,
...initialStateUIState,
errors: ['x']
},
Actions.setErrors(['err1', 'err2'])
stateUIActions.setErrors(['err1', 'err2'])
)
).toEqual({
...initialState,
...initialStateUIState,
errors: ['err1', 'err2']
} as State)
})
......@@ -55,75 +55,75 @@ describe('toolbar reducer', () => {
expect(
reducer(
{
...initialState,
...initialStateUIState,
errors: ['x']
},
Actions.resetErrors()
stateUIActions.resetErrors()
)
).toEqual(initialState)
).toEqual(initialStateUIState)
})
it('toggles build state', () => {
expect(reducer(initialState, Actions.toggleBuildState())).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.toggleBuildState())).toEqual({
...initialStateUIState,
buildState: true
} as State)
expect(
reducer(initialState, Actions.toggleBuildState('initial'))
reducer(initialStateUIState, stateUIActions.toggleBuildState('initial'))
).toEqual({
...initialState,
...initialStateUIState,
buildState: true,
buildStateType: 'initial'
} as State)
expect(
reducer(initialState, Actions.toggleBuildState('final'))
reducer(initialStateUIState, stateUIActions.toggleBuildState('final'))
).toEqual({
...initialState,
...initialStateUIState,
buildState: true,
buildStateType: 'final'
} as State)
})
it('toggles build transition', () => {
expect(reducer(initialState, Actions.toggleBuildTransition())).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.toggleBuildTransition())).toEqual({
...initialStateUIState,
buildTransition: true
} as State)
})
it('sets build state', () => {
expect(reducer(initialState, Actions.setBuildState(true))).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.setBuildState(true))).toEqual({
...initialStateUIState,
buildState: true
} as State)
})
it('sets build transition', () => {
expect(reducer(initialState, Actions.setBuildTransition(true))).toEqual(
expect(reducer(initialStateUIState, stateUIActions.setBuildTransition(true))).toEqual(
{
...initialState,
...initialStateUIState,
buildTransition: true
} as State
)
})
it('toggles hint', () => {
expect(reducer(initialState, Actions.toggleShowHint())).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.toggleShowHint())).toEqual({
...initialStateUIState,
showHint: false
} as State)
})
it('sets explore', () => {
expect(reducer(initialState, Actions.setShowExplore(true))).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.setShowExplore(true))).toEqual({
...initialStateUIState,
showExplore: true
} as State)
})
it('resets', () => {
expect(reducer(initialState, Actions.reset())).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.reset())).toEqual({
...initialStateUIState,
buildState: false,
buildTransition: false,
input: '',
......@@ -132,17 +132,17 @@ describe('toolbar reducer', () => {
})
it('sets confirm text', () => {
expect(reducer(initialState, Actions.setConfirmText('x'))).toEqual({
...initialState,
expect(reducer(initialStateUIState, stateUIActions.setConfirmText('x'))).toEqual({
...initialStateUIState,
confirmText: 'x'
} as State)
})
it('sets mouse mode', () => {
expect(
reducer(initialState, Actions.setMouseMode('horizontal'))
reducer(initialStateUIState, stateUIActions.setMouseMode('horizontal'))
).toEqual({
...initialState,
...initialStateUIState,
mouseMode: 'horizontal'
} as State)
})
......
......@@ -3,7 +3,7 @@ import AlgorithmNode from '../interfaces/AlgorithmNode'
import AlgorithmEdge from '../interfaces/AlgorithmEdge'
import { AlgorithmDataActions } from './algorithmData'
export interface AlgorithmToolbarState {
export interface AlgorithmUIState {
/** Open/close Statemaker dialog */
statemakerOpen: boolean
/** Show/hide Statemaker apply and cancel buttons */
......@@ -27,7 +27,7 @@ export interface AlgorithmToolbarState {
}
}
export const initialAlgorithmToolbarState: AlgorithmToolbarState = {
export const initialAlgorithmUIState: AlgorithmUIState = {
statemakerOpen: false,
showStatemakerApplyButton: false,
stringDialogContent: '',
......@@ -60,7 +60,7 @@ export const initialAlgorithmToolbarState: AlgorithmToolbarState = {
}
}
export const algorithmToolbarActions = {
export const algorithmUIActions = {
/** Opens/closes statemaker */
setStatemakerOpen: (value: boolean, showButtons: boolean = false) =>
createAction('setStatemakerOpen', { value, showButtons }),
......@@ -99,13 +99,13 @@ export const algorithmToolbarActions = {
closeInputDialog: () => createAction('closeInputDialog')
}
export type AlgorithmToolbarActions = ActionsUnion<
typeof algorithmToolbarActions
export type AlgorithmUIActions = ActionsUnion<
typeof algorithmUIActions
>
export const algorithmToolbarReducer = (
state: AlgorithmToolbarState = initialAlgorithmToolbarState,
action: AlgorithmToolbarActions | AlgorithmDataActions
export const algorithmUIReducer = (
state: AlgorithmUIState = initialAlgorithmUIState,
action: AlgorithmUIActions | AlgorithmDataActions
) => {
switch (action.type) {
case 'setStatemakerOpen': {
......