second column y offset transformation inconsistency fixed

table view second column exit animation done multiple table views open xoffset update commented and grouped logic properly added logic to stop phase to change to update until height is updated
cybersemics · May 11, 2020 · 193dc50 · 193dc50
1 parent b384cd2
commit 193dc50
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 29 deletions.
diff --git a/src/components/AppComponent.tsx b/src/components/AppComponent.tsx
@@ -23,8 +23,7 @@ import Scale from './Scale'
 import Tutorial from './Tutorial'
 import Toolbar from './Toolbar'
 import HamburgerMenu from './HamburgerMenu'
-import FlatTreeRenderer from './FlatTreeRenderer.js'
-
+import FlatTreeRenderer from './FlatTreeRenderer'
 
 // util
 import {
@@ -153,24 +152,27 @@ const AppComponent: FC<Props> = (props) => {
                 size={!splitView ? '100%' : splitPosition || '50%'}
                 onDragFinished={updateSplitPos}
               >
-                <div style={{marginTop:'4rem', height: '90vh'}}>
-                  <FlatTreeRenderer />
-                </div>
+                <Scale amount={scale}>
+                  <div style={{ height: '90vh' }}>
+                    <FlatTreeRenderer/>
+                  </div>
+                </Scale>
+
                 {showSplitView
                   ? (
-                    // <Scale amount={scale}>
-                      <Scale amount={scale}>
-                        <Content />
-                      </Scale>
-                    // </Scale>
+                    <Scale amount={scale}>
+                      <Content />
+                    </Scale>
                   )
                   // children required by SplitPane
                   : <div />}
               </SplitPane>
 
               <div className='nav-bottom-wrapper'>
                 <Scale amount={scale}>
+
                   <NavBar position='bottom' />
+
                 </Scale>
               </div>
 
@@ -186,4 +188,4 @@ const AppComponent: FC<Props> = (props) => {
   )
 }
 
-export default connect<StateProps, DispatchProps>(mapStateToProps, mapDispatchToProps)(AppComponent)
+export default connect<StateProps, DispatchProps>(mapStateToProps, mapDispatchToProps)(AppComponent)
diff --git a/src/components/FlatTreeRenderer.js b/src/components/FlatTreeRenderer.js
@@ -10,22 +10,33 @@ import ContentEditable from 'react-contenteditable'
 import { treeToFlatArray } from '../util'
 
 // factor by which second column of table view slides to right
-const TABLE_SECOND_COLUMN_OFFSET = 5
+const TABLE_SECOND_COLUMN_OFFSET = 2.5
+
 // factor by which first column of table view slides to right
-const TABLE_FIRST_COLUMN_OFFSET = 2
+const TABLE_FIRST_COLUMN_OFFSET = 1.5
+
+// factor by which x offset should be increase with each depth
+const DEPTH_OFFSET = 1
 
-const TreeNode = ({ styleProps, value, item, oldItem, springKey, phase, rotation, selectionOpacity, visibleStartDepth }) => {
+const TreeNode = ({ styleProps, value, item, oldItem, springKey, phase: actualPhase, rotation, selectionOpacity, visibleStartDepth }) => {
 
   const [bind, { height: viewHeight }] = useMeasure(value)
 
+  /*
+    Note: Sometimes 'enter' phase misses the height update because height observer hook
+    provides actual height only after fraction of time. Since some animation (specially Y transform)
+    depends on height during 'enter' phase, so stopping phase to enter 'update' until height is updated.
+  */
+  const phase = actualPhase === 'update' && viewHeight === 0 ? 'enter' : actualPhase
+
   // table view info
   const isFirstColumn = item.viewInfo.table.column === 1
   const isSecondColumn = item.viewInfo.table.column === 2
   const isSecondColumnFirstItem = isSecondColumn && item.viewInfo.table.index === 0
   const isOldItemSecondColumnFirstItem = oldItem ? (oldItem.viewInfo.table.column === 2 && oldItem.viewInfo.table.index === 0) : false
 
   // depth from the first visible node
-  const depthOffsetFactor = (item.path.length - visibleStartDepth)
+  const depth = (item.path.length - visibleStartDepth)
 
   /* ### X offset Animation ###
     - handle offset with increasing depth
@@ -35,14 +46,20 @@ const TreeNode = ({ styleProps, value, item, oldItem, springKey, phase, rotation
     - adjust x offset when multiple table view are open
   */
   const xOffsetCount = (
-    depthOffsetFactor +
+    depth * DEPTH_OFFSET +
     (isFirstColumn ? TABLE_FIRST_COLUMN_OFFSET : 0) +
     // for table view second column
     (isSecondColumn ? TABLE_SECOND_COLUMN_OFFSET : 0) +
-    // deeper nodes adjust offset for the number of active table second columns above them
-    ((!isFirstColumn && !isSecondColumn) ? item.viewInfo.table.activeTableNodesAbove * (TABLE_SECOND_COLUMN_OFFSET) : 0)
+    // deeper nodes adjust offset for the number of active first and second table columns above them
+    (item.viewInfo.table.tableFirstColumnsAbove) * (TABLE_FIRST_COLUMN_OFFSET) +
+    (item.viewInfo.table.tableSecondColumnsAbove) * (TABLE_SECOND_COLUMN_OFFSET)
   ) * 1.2
 
+  // check if table view second column is mounting to initiate from to X tranform animation
+  const shouldProvideFromXOffset = phase === 'enter' && isSecondColumn
+
+  const fromXOffsetValue = (xOffsetCount - 6)
+
   /* ### Y Offset Animation ###
     - transform second column first item to be at same vertical level as first column
   */
@@ -57,19 +74,29 @@ const TreeNode = ({ styleProps, value, item, oldItem, springKey, phase, rotation
 
   /* ### Overflow ###
     - overflow 'hidden' is used in the wrapper div with height animation to give animated thought reveal effect.
-    - overflow is made visible when second column first item either entering or updating to avoid janky animation
-      and also when element just transitoned from table second column first item to normal view
+    - overflow is made visible when the node is second column first item and also when element just transitoned
+      from table second column first item to normal view
   */
-  const overflow = phase !== 'leave' && (isSecondColumnFirstItem || (!isSecondColumnFirstItem && isOldItemSecondColumnFirstItem)) ? 'visible' : 'hidden'
+  const overflow = (
+    isSecondColumnFirstItem ||
+    (phase !== 'leave' && (!isSecondColumnFirstItem && isOldItemSecondColumnFirstItem))
+  ) ? 'visible' : 'hidden'
 
   // ### Animation Handler ###
   const { height, width, x, y } = useSpring({
     from: {
-      x: phase === 'enter' && isSecondColumnFirstItem ? (xOffsetCount - 6) : 0
+      /*
+        Note: from is only done for specific cases like second column x-offset transform animation
+       */
+      ...(
+        shouldProvideFromXOffset ? {
+          x: fromXOffsetValue
+        } : {}
+      )
     },
     to: {
       height: heightValue,
-      x: xOffsetCount - (phase === 'leave' && isSecondColumnFirstItem ? 6 : 0),
+      x: xOffsetCount - (phase === 'leave' && isSecondColumn ? TABLE_SECOND_COLUMN_OFFSET : 0),
       y: yOffset,
       // to-do: handle width and oveflow properly incase of table view
       width: isFirstColumn ? `${(item.path.length - visibleStartDepth + 4)}rem` : '500rem'
@@ -104,7 +131,7 @@ const TreeNode = ({ styleProps, value, item, oldItem, springKey, phase, rotation
                 { item.hasChildren ? '▸' : '•' }
               </animated.span>
             </animated.div>
-            <ContentEditable html={value} style={{ flex: 1 }} placeholder='Add a thought'/>
+            <ContentEditable html={value} placeholder='Add a thought'/>
           </div>
         </animated.div>
       </div>

diff --git a/src/util/treeToFlatArray.js b/src/util/treeToFlatArray.js
@@ -40,7 +40,7 @@ const getFlatArray = ({
   isCursorDescendant = false,
   visibleSiblingsCount,
   pinChildren,
-  viewInfo = { table: { activeTableNodesAbove: 0, isActive: false, column: null } }
+  viewInfo = { table: { tableFirstColumnsAbove: 0, tableSecondColumnsAbove: 0, isActive: false, column: null } }
 } = {}) => {
   const parentNode = head(startingPath) || RANKED_ROOT[0]
 
@@ -131,6 +131,8 @@ const getFlatArray = ({
         ? distanceFromCursor >= 0
         : distanceFromCursor >= (isCursorAncestor ? 2 : 1)) && !isCursor
 
+    const tableInfo = viewInfo.table
+
     const { depthInfo: childrenDepthInfo, flatArray: flatArrayDescendants } = stop
       ? { depthInfo: calculateDepthInfo(childPath, children), flatArray: [] } // stop recursion if stop is true (leaf nodes)
       : getFlatArray({
@@ -144,10 +146,10 @@ const getFlatArray = ({
         visibleSiblingsCount: filteredChildren.length, // children nodes won't have to itearate its siblings
         pinChildren: isChildrenPinned,
         viewInfo: {
-          ...viewInfo,
           table: {
-            activeTableNodesAbove: viewInfo.table.activeTableNodesAbove + (isTableView ? 1 : 0),
-            column: isTableView ? 1 : (viewInfo.table.column ? (viewInfo.table.column + 1) : null)
+            tableFirstColumnsAbove: tableInfo.tableFirstColumnsAbove + (tableInfo.column === 1 ? 1 : 0),
+            tableSecondColumnsAbove: tableInfo.tableSecondColumnsAbove + (tableInfo.column === 2 ? 1 : 0),
+            column: isTableView ? 1 : (tableInfo.column ? (tableInfo.column + 1) : null)
           }
         }
       })
@@ -199,7 +201,8 @@ const getFlatArray = ({
           expanded: flatArrayDescendants.length > 0,
           viewInfo: {
             table: {
-              activeTableNodesAbove: viewInfo.table.activeTableNodesAbove,
+              tableFirstColumnsAbove: tableInfo.tableFirstColumnsAbove,
+              tableSecondColumnsAbove: tableInfo.tableSecondColumnsAbove,
               isActive: isTableView,
               column: viewInfo.table.column,
               index