diff --git a/src/components/LayoutTree.tsx b/src/components/LayoutTree.tsx index 059815b580..2d707bf99c 100644 --- a/src/components/LayoutTree.tsx +++ b/src/components/LayoutTree.tsx @@ -26,7 +26,7 @@ import getStyle from '../selectors/getStyle' import getThoughtById from '../selectors/getThoughtById' import isContextViewActive from '../selectors/isContextViewActive' import nextSibling from '../selectors/nextSibling' -import rootedParentOf from '../selectors/rootedParentOf' +import rootedParentOf, { rootedGrandparentOf } from '../selectors/rootedParentOf' import simplifyPath from '../selectors/simplifyPath' import thoughtToPath from '../selectors/thoughtToPath' import reactMinistore from '../stores/react-ministore' @@ -912,7 +912,7 @@ const LayoutTree = () => { // When the cursor is in a table, all thoughts beneath the table are hidden, // so there is no concern about animation name conflicts with subsequent (deeper) thoughts. const tableDepth = useSelector(state => - state.cursor && attributeEquals(state, head(rootedParentOf(state, state.cursor)), '=view', 'Table') ? 1 : 0, + state.cursor && attributeEquals(state, head(rootedGrandparentOf(state, state.cursor)), '=view', 'Table') ? 1 : 0, ) // The indentDepth multipicand (0.9) causes the horizontal counter-indentation to fall short of the actual indentation, causing a progressive shifting right as the user navigates deeper. This provides an additional cue for the user's depth, which is helpful when autofocus obscures the actual depth, but it must stay small otherwise the thought width becomes too small. // The indentCursorAncestorTables multipicand (0.5) is smaller, since animating over by the entire width of column 1 is too abrupt. diff --git a/src/selectors/rootedParentOf.ts b/src/selectors/rootedParentOf.ts index 2245af9acf..aab51acae5 100644 --- a/src/selectors/rootedParentOf.ts +++ b/src/selectors/rootedParentOf.ts @@ -23,4 +23,8 @@ const rootedParentOf = (state: State, thoughts: T): T : (state.rootContext as T) } +/** Calls rootedParentOf twice to get the rooted grandparent of a thought. */ +export const rootedGrandparentOf = (state: State, thoughts: T): T => + rootedParentOf(state, rootedParentOf(state, thoughts)) + export default rootedParentOf