Use actual range ids in companion window TOC state

lutzhelm · Feb 12, 2020 · ae462f3 · ae462f3
1 parent 367daa5
commit ae462f3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/src/components/SidebarIndexTableOfContents.js b/src/components/SidebarIndexTableOfContents.js
@@ -11,8 +11,8 @@ import { ScrollTo } from './ScrollTo';
 export class SidebarIndexTableOfContents extends Component {
   /** */
   selectTreeItem(node) {
-    const { setCanvas, toggleRangeNode, windowId } = this.props;
-    toggleRangeNode(node.id);
+    const { setCanvas, toggleRange, windowId } = this.props;
+    toggleRange(node.data.id);
     // Do not select if there are child nodes
     if (node.nodes.length > 0) {
       return;
@@ -27,16 +27,16 @@ export class SidebarIndexTableOfContents extends Component {
       nodes.map(node => (
         <TreeItem
           key={node.id}
-          nodeId={node.id}
+          nodeId={node.data.id}
           label={(
               <ScrollTo
                 containerRef={containerRef}
                 key={`${node.id}-scroll`}
                 offsetTop={96} // offset for the height of the form above
-                scrollTo={visibleRangeIds.indexOf(node.id) !== - 1 && node.nodes.length === 0}
+                scrollTo={visibleRangeIds.indexOf(node.data.id) !== - 1 && node.nodes.length === 0}
               >
                 <>
-                  {visibleRangeIds.indexOf(node.id) !== -1 && <VisibilityIcon />}
+                  {visibleRangeIds.indexOf(node.data.id) !== -1 && <VisibilityIcon fontSize='small' color='secondary'/>}
                   {node.label}
                 </>
               </ScrollTo>

diff --git a/src/containers/SidebarIndexTableOfContents.js b/src/containers/SidebarIndexTableOfContents.js
@@ -8,8 +8,8 @@ import {
   getManifestoInstance,
   getManifestTreeStructure,
   getVisibleCanvases,
-  getVisibleNodeIds,
-  getExpandedNodeIds,
+  getVisibleRangeIds,
+  getExpandedRangeIds,
 } from '../state/selectors';
 import * as actions from '../state/actions';
 
@@ -19,10 +19,10 @@ import * as actions from '../state/actions';
  */
 const mapStateToProps = (state, { id, windowId }) => ({
   canvases: getVisibleCanvases(state, { windowId }),
-  expandedRangeIds: getExpandedNodeIds(state, { companionWindowId: id, windowId }),
+  expandedRangeIds: getExpandedRangeIds(state, { companionWindowId: id, windowId }),
   manifesto: getManifestoInstance(state, { windowId }),
   treeStructure: getManifestTreeStructure(state, { windowId }),
-  visibleRangeIds: getVisibleNodeIds(state, { windowId }),
+  visibleRangeIds: getVisibleRangeIds(state, { windowId }),
 });
 
 /**
@@ -32,7 +32,7 @@ const mapStateToProps = (state, { id, windowId }) => ({
  */
 const mapDispatchToProps = (dispatch, { id, windowId }) => ({
   setCanvas: (...args) => dispatch(actions.setCanvas(...args)),
-  toggleRangeNode: nodeId => dispatch(actions.toggleRangeNode(windowId, id, nodeId)),
+  toggleRange: nodeId => dispatch(actions.toggleRange(windowId, id, nodeId)),
 });
 
 /**

diff --git a/src/state/actions/companionWindow.js b/src/state/actions/companionWindow.js
@@ -59,16 +59,16 @@ export function removeCompanionWindow(windowId, id) {
 }
 
 /** */
-export function toggleRangeNode(windowId, id, nodeId) {
+export function toggleRange(windowId, id, rangeId) {
   return (dispatch, getState) => {
     const state = getState();
     const companionWindow = state.companionWindows[id];
-    const expandedNodeIds = companionWindow.expandedNodeIds || [];
+    const expandedRangeIds = companionWindow.expandedRangeIds || [];
     const payload = {};
-    if (expandedNodeIds.indexOf(nodeId) === -1) {
-      payload.expandedNodeIds = [...expandedNodeIds, nodeId];
+    if (expandedRangeIds.indexOf(rangeId) === -1) {
+      payload.expandedRangeIds = [...expandedRangeIds, rangeId];
     } else {
-      payload.expandedNodeIds = expandedNodeIds.filter(item => nodeId !== item);
+      payload.expandedRangeIds = expandedRangeIds.filter(item => rangeId !== item);
     }
     return dispatch({
       id,

diff --git a/src/state/selectors/ranges.js b/src/state/selectors/ranges.js
@@ -5,7 +5,7 @@ import { getVisibleCanvases } from './canvases';
 import { getCompanionWindow } from './companionWindows';
 
 /** */
-function getVisibleNodeIdsInSubTree(nodes, canvasIds) {
+function getVisibleRangeIdsInSubTree(nodes, canvasIds) {
   return nodes.reduce((rangeIds, node) => {
     const currentRangeIds = [];
     const nodeContainsVisibleCanvas = canvasIds.reduce(
@@ -14,19 +14,19 @@ function getVisibleNodeIdsInSubTree(nodes, canvasIds) {
     );
     if (node.nodes.length > 0) {
       const subTreeVisibleRangeIds = node.nodes.length > 0
-        ? getVisibleNodeIdsInSubTree(node.nodes, canvasIds) : [];
+        ? getVisibleRangeIdsInSubTree(node.nodes, canvasIds) : [];
       currentRangeIds.push(...subTreeVisibleRangeIds);
     }
     if (currentRangeIds.length > 0 || nodeContainsVisibleCanvas) {
-      currentRangeIds.push(node.id);
+      currentRangeIds.push(node.data.id);
     }
     rangeIds.push(...currentRangeIds);
     return rangeIds;
   }, []);
 }
 
 /** */
-export const getVisibleNodeIds = createSelector(
+export const getVisibleRangeIds = createSelector(
   [
     getManifestTreeStructure,
     getVisibleCanvases,
@@ -36,19 +36,19 @@ export const getVisibleNodeIds = createSelector(
       return [];
     }
     const canvasIds = canvases.map(canvas => canvas.id);
-    return getVisibleNodeIdsInSubTree(tree.nodes, canvasIds);
+    return getVisibleRangeIdsInSubTree(tree.nodes, canvasIds);
   },
 );
 
 /** */
-export function getManuallyExpandedNodeIds(state, { companionWindowId }) {
+export function getManuallyExpandedRangeIds(state, { companionWindowId }) {
   const companionWindow = getCompanionWindow(state, { companionWindowId });
-  return companionWindow.expandedNodeIds || [];
+  return companionWindow.expandedRangeIds || [];
 }
 
 /** */
-export function getExpandedNodeIds(state, { ...args }) {
-  const visibleNodeIds = getVisibleNodeIds(state, { ...args });
-  const manuallyExpandedNodeIds = getManuallyExpandedNodeIds(state, { ...args });
-  return union(manuallyExpandedNodeIds, visibleNodeIds);
+export function getExpandedRangeIds(state, { ...args }) {
+  const visibleRangeIds = getVisibleRangeIds(state, { ...args });
+  const manuallyExpandedRangeIds = getManuallyExpandedRangeIds(state, { ...args });
+  return union(manuallyExpandedRangeIds, visibleRangeIds);
 }