feat: add outliner

frontend/src/App/Routes.tsx

@@ -15,6 +15,7 @@ import styled from 'styled-components';
 import JwtDecode from 'jwt-decode';
 import { setAccessToken } from 'shared/utils/accessToken';
 import { useCurrentUser } from 'App/context';
+import Outline from 'Outline';
 
 const MainContent = styled.div`
   padding: 0 0 0 0;
@@ -67,6 +68,7 @@ const AuthorizedRoutes = () => {
         <Route exact path="/projects" component={Projects} />
         <Route path="/projects/:projectID" component={Project} />
         <Route path="/teams/:teamID" component={Teams} />
+        <Route path="/outline" component={Outline} />
         <Route path="/profile" component={Profile} />
         <Route path="/admin" component={Admin} />
       </MainContent>

frontend/src/Outline/DragDebug.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { DragDebugWrapper } from './Styles';
+
+type DragDebugProps = {
+  zone: ImpactZone | null;
+  depthTarget: number;
+  draggedNodes: Array<string> | null;
+};
+
+const DragDebug: React.FC<DragDebugProps> = ({ zone, depthTarget, draggedNodes }) => {
+  let aboveID = null;
+  let belowID = null;
+  if (zone) {
+    aboveID = zone.above ? zone.above.node.id : null;
+    belowID = zone.below ? zone.below.node.id : null;
+  }
+  return (
+    <DragDebugWrapper>{`aboveID=${aboveID} / belowID=${belowID} / depthTarget=${depthTarget} draggedNodes=${
+      draggedNodes ? draggedNodes.toString() : null
+    }`}</DragDebugWrapper>
+  );
+};
+
+export default DragDebug;

frontend/src/Outline/DragIndicator.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { getDimensions } from './utils';
+import { DragIndicatorBar } from './Styles';
+
+type DragIndicatorProps = {
+  container: React.RefObject<HTMLDivElement>;
+  zone: ImpactZone;
+  depthTarget: number;
+};
+
+const DragIndicator: React.FC<DragIndicatorProps> = ({ container, zone, depthTarget }) => {
+  let top = 0;
+  let width = 0;
+  if (zone.below === null) {
+    if (zone.above) {
+      const entry = getDimensions(zone.above.dimensions.entry);
+      const children = getDimensions(zone.above.dimensions.children);
+      if (children) {
+        top = children.top;
+        width = children.width - depthTarget * 35;
+      } else if (entry) {
+        top = entry.bottom;
+        width = entry.width - depthTarget * 35;
+      }
+    }
+  } else if (zone.below) {
+    const entry = getDimensions(zone.below.dimensions.entry);
+    if (entry) {
+      top = entry.top;
+      width = entry.width - depthTarget * 35;
+    }
+  }
+  let left = 0;
+  if (container && container.current) {
+    left = container.current.getBoundingClientRect().left + (depthTarget - 1) * 35;
+    width = container.current.getBoundingClientRect().width - depthTarget * 35;
+  }
+  return <DragIndicatorBar top={top} left={left} width={width} />;
+};
+
+export default DragIndicator;

frontend/src/Outline/Dragger.tsx

@@ -0,0 +1,242 @@
+import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import { Dot } from 'shared/icons';
+import styled from 'styled-components';
+import {
+  findNextDraggable,
+  getDimensions,
+  getTargetDepth,
+  getNodeAbove,
+  getBelowParent,
+  findNodeAbove,
+  getNodeOver,
+  getLastChildInBranch,
+  findNodeDepth,
+} from './utils';
+import { useDrag } from './useDrag';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background: rgba(${p => p.theme.colors.primary});
+  svg {
+    fill: rgba(${p => p.theme.colors.text.primary});
+    stroke: rgba(${p => p.theme.colors.text.primary});
+  }
+`;
+
+type DraggerProps = {
+  container: React.RefObject<HTMLDivElement>;
+  draggedNodes: { nodes: Array<string>; first?: OutlineNode | null };
+  isDragging: boolean;
+  onDragEnd: (zone: ImpactZone) => void;
+  initialPos: { x: number; y: number };
+};
+
+const Dragger: React.FC<DraggerProps> = ({ draggedNodes, container, onDragEnd, isDragging, initialPos }) => {
+  const [pos, setPos] = useState<{ x: number; y: number }>(initialPos);
+  const { outline, impact, setImpact } = useDrag();
+  const $handle = useRef<HTMLDivElement>(null);
+  const handleMouseUp = useCallback(() => {
+    onDragEnd(impact ? impact.zone : { below: null, above: null });
+  }, [impact]);
+  const handleMouseMove = useCallback(
+    e => {
+      e.preventDefault();
+      const { clientX, clientY, pageX, pageY } = e;
+      setPos({ x: clientX, y: clientY });
+      const { curDepth, curPosition, curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
+      let depthTarget: number = 0;
+      let aboveNode: null | OutlineNode = null;
+      let belowNode: null | OutlineNode = null;
+
+      if (curPosition === 'before') {
+        belowNode = curDraggable;
+      } else {
+        aboveNode = curDraggable;
+      }
+
+      // if belowNode has the depth of 1, then the above element will be a part of a different branch
+
+      const { relationships, nodes } = outline.current;
+      if (!belowNode || !aboveNode) {
+        if (belowNode) {
+          aboveNode = findNodeAbove(outline.current, curDepth, belowNode);
+        } else if (aboveNode) {
+          let targetBelowNode: RelationshipChild | null = null;
+          const parent = relationships.get(aboveNode.parent);
+          if (aboveNode.children !== 0 && !aboveNode.collapsed) {
+            const abr = relationships.get(aboveNode.id);
+            if (abr) {
+              const newTarget = abr.children[0];
+              if (newTarget) {
+                targetBelowNode = newTarget;
+              }
+            }
+          } else if (parent) {
+            const aboveNodeIndex = parent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
+            if (aboveNodeIndex !== -1) {
+              if (aboveNodeIndex === parent.children.length - 1) {
+                targetBelowNode = getBelowParent(aboveNode, outline.current);
+              } else {
+                const nextChild = parent.children[aboveNodeIndex + 1];
+                targetBelowNode = nextChild ?? null;
+              }
+            }
+          }
+          if (targetBelowNode) {
+            const depthNodes = nodes.get(targetBelowNode.depth);
+            if (depthNodes) {
+              belowNode = depthNodes.get(targetBelowNode.id) ?? null;
+            }
+          }
+        }
+      }
+
+      // if outside outline, get either first or last item in list based on mouse Y
+      if (!aboveNode && !belowNode) {
+        if (container && container.current) {
+          const bounds = container.current.getBoundingClientRect();
+          if (clientY < bounds.top + bounds.height / 2) {
+            const rootChildren = outline.current.relationships.get('root');
+            const rootDepth = outline.current.nodes.get(1);
+            if (rootChildren && rootDepth) {
+              const firstChild = rootChildren.children[0];
+              belowNode = rootDepth.get(firstChild.id) ?? null;
+              aboveNode = null;
+            }
+          } else {
+            // TODO: enhance to actually get last child item, not last top level branch
+            const rootChildren = outline.current.relationships.get('root');
+            const rootDepth = outline.current.nodes.get(1);
+            if (rootChildren && rootDepth) {
+              const lastChild = rootChildren.children[rootChildren.children.length - 1];
+              const lastParentNode = rootDepth.get(lastChild.id) ?? null;
+
+              if (lastParentNode) {
+                const lastBranchChild = getLastChildInBranch(outline.current, lastParentNode);
+                if (lastBranchChild) {
+                  const lastChildDepth = outline.current.nodes.get(lastBranchChild.depth);
+                  if (lastChildDepth) {
+                    aboveNode = lastChildDepth.get(lastBranchChild.id) ?? null;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      if (aboveNode) {
+        const { ancestors } = findNodeDepth(outline.current.published, aboveNode.id);
+        for (let i = 0; i < draggedNodes.nodes.length; i++) {
+          const nodeID = draggedNodes.nodes[i];
+          if (ancestors.find(c => c === nodeID)) {
+            if (draggedNodes.first) {
+              belowNode = draggedNodes.first;
+              aboveNode = findNodeAbove(outline.current, aboveNode ? aboveNode.depth : 1, draggedNodes.first);
+            } else {
+              const { depth } = findNodeDepth(outline.current.published, nodeID);
+              const nodeDepth = outline.current.nodes.get(depth);
+              const targetNode = nodeDepth ? nodeDepth.get(nodeID) : null;
+              if (targetNode) {
+                belowNode = targetNode;
+
+                aboveNode = findNodeAbove(outline.current, depth, targetNode);
+              }
+            }
+          }
+        }
+      }
+
+      // calculate available depths
+
+      let minDepth = 1;
+      let maxDepth = 2;
+      if (aboveNode) {
+        const aboveParent = relationships.get(aboveNode.parent);
+        if (aboveNode.children !== 0 && !aboveNode.collapsed) {
+          minDepth = aboveNode.depth + 1;
+          maxDepth = aboveNode.depth + 1;
+        } else if (aboveParent) {
+          minDepth = aboveNode.depth;
+          maxDepth = aboveNode.depth + 1;
+          const aboveNodeIndex = aboveParent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
+          if (aboveNodeIndex === aboveParent.children.length - 1) {
+            minDepth = belowNode ? belowNode.depth : minDepth;
+          }
+        }
+      }
+      if (aboveNode) {
+        const dimensions = outline.current.dimensions.get(aboveNode.id);
+        const entry = getDimensions(dimensions?.entry);
+        if (entry) {
+          depthTarget = getTargetDepth(clientX, entry.left, { min: minDepth, max: maxDepth });
+        }
+      }
+
+      let aboveImpact: null | ImpactZoneData = null;
+      let belowImpact: null | ImpactZoneData = null;
+      if (aboveNode) {
+        const aboveDim = outline.current.dimensions.get(aboveNode.id);
+        if (aboveDim) {
+          aboveImpact = {
+            node: aboveNode,
+            dimensions: aboveDim,
+          };
+        }
+      }
+      if (belowNode) {
+        const belowDim = outline.current.dimensions.get(belowNode.id);
+        if (belowDim) {
+          belowImpact = {
+            node: belowNode,
+            dimensions: belowDim,
+          };
+        }
+      }
+
+      setImpact({
+        zone: {
+          above: aboveImpact,
+          below: belowImpact,
+        },
+        depth: depthTarget,
+      });
+    },
+    [outline.current.nodes],
+  );
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+  const styles = useMemo(() => {
+    const position: 'absolute' | 'relative' = isDragging ? 'absolute' : 'relative';
+    return {
+      cursor: isDragging ? '-webkit-grabbing' : '-webkit-grab',
+      transform: `translate(${pos.x - 10}px, ${pos.y - 4}px)`,
+      transition: isDragging ? 'none' : 'transform 500ms',
+      zIndex: isDragging ? 2 : 1,
+      position,
+    };
+  }, [isDragging, pos]);
+
+  return (
+    <>
+      {pos && (
+        <Container ref={$handle} style={styles}>
+          <Dot width={18} height={18} />
+        </Container>
+      )}
+    </>
+  );
+};
+
+export default Dragger;

frontend/src/Outline/Entry.tsx

@@ -0,0 +1,155 @@
+import React, { useRef, useEffect } from 'react';
+import { Dot, CaretDown, CaretRight } from 'shared/icons';
+
+import { EntryChildren, EntryWrapper, EntryContent, EntryInnerContent, EntryHandle, ExpandButton } from './Styles';
+import { useDrag } from './useDrag';
+
+function getCaretPosition(editableDiv: any) {
+  let caretPos = 0;
+  let sel: any = null;
+  let range: any = null;
+  if (window.getSelection) {
+    sel = window.getSelection();
+    if (sel && sel.rangeCount) {
+      range = sel.getRangeAt(0);
+      if (range.commonAncestorContainer.parentNode === editableDiv) {
+        caretPos = range.endOffset;
+      }
+    }
+  }
+  return caretPos;
+}
+
+type EntryProps = {
+  id: string;
+  collapsed?: boolean;
+  onToggleCollapse: (id: string, collapsed: boolean) => void;
+  parentID: string;
+  onStartDrag: (e: { id: string; clientX: number; clientY: number }) => void;
+  onStartSelect: (e: { id: string; depth: number }) => void;
+  isRoot?: boolean;
+  selection: null | Array<{ id: string }>;
+  draggedNodes: null | Array<string>;
+  entries: Array<ItemElement>;
+  onCancelDrag: () => void;
+  position: number;
+  chain?: Array<string>;
+  depth?: number;
+};
+
+const Entry: React.FC<EntryProps> = ({
+  id,
+  parentID,
+  isRoot = false,
+  selection,
+  onToggleCollapse,
+  onStartSelect,
+  position,
+  onCancelDrag,
+  onStartDrag,
+  collapsed = false,
+  draggedNodes,
+  entries,
+  chain = [],
+  depth = 0,
+}) => {
+  const $entry = useRef<HTMLDivElement>(null);
+  const $children = useRef<HTMLDivElement>(null);
+  const { setNodeDimensions, clearNodeDimensions } = useDrag();
+  useEffect(() => {
+    if (isRoot) return;
+    if ($entry && $entry.current) {
+      setNodeDimensions(id, {
+        entry: $entry,
+        children: entries.length !== 0 ? $children : null,
+      });
+    }
+    return () => {
+      clearNodeDimensions(id);
+    };
+  }, [position, depth, entries]);
+  let showHandle = true;
+  if (draggedNodes && draggedNodes.length === 1 && draggedNodes.find(c => c === id)) {
+    showHandle = false;
+  }
+  let isSelected = false;
+  if (selection && selection.find(c => c.id === id)) {
+    isSelected = true;
+  }
+  let onSaveTimer: any = null;
+  const onSaveTimeout = 300;
+  return (
+    <EntryWrapper isSelected={isSelected} isDragging={!showHandle}>
+      {!isRoot && (
+        <EntryContent>
+          {entries.length !== 0 && (
+            <ExpandButton onClick={() => onToggleCollapse(id, !collapsed)}>
+              {collapsed ? <CaretRight width={20} height={20} /> : <CaretDown width={20} height={20} />}
+            </ExpandButton>
+          )}
+          {showHandle && (
+            <EntryHandle
+              onMouseUp={() => onCancelDrag()}
+              onMouseDown={e => {
+                onStartDrag({ id, clientX: e.clientX, clientY: e.clientY });
+              }}
+            >
+              <Dot width={18} height={18} />
+            </EntryHandle>
+          )}
+          <EntryInnerContent
+            onMouseDown={() => {
+              onStartSelect({ id, depth });
+            }}
+            onKeyDown={e => {
+              if (e.key === 'z' && e.ctrlKey) {
+                if ($entry && $entry.current) {
+                  console.log(getCaretPosition($entry.current));
+                }
+              } else {
+                clearTimeout(onSaveTimer);
+                if ($entry && $entry.current) {
+                  onSaveTimer = setTimeout(() => {
+                    if ($entry && $entry.current) {
+                      console.log($entry.current.textContent);
+                    }
+                  }, onSaveTimeout);
+                }
+              }
+            }}
+            contentEditable
+            ref={$entry}
+          >
+            {`${id.toString()} - ${position}`}
+          </EntryInnerContent>
+        </EntryContent>
+      )}
+      {entries.length !== 0 && !collapsed && (
+        <EntryChildren ref={$children} isRoot={isRoot}>
+          {entries
+            .sort((a, b) => a.position - b.position)
+            .map(entry => (
+              <Entry
+                parentID={id}
+                key={entry.id}
+                position={entry.position}
+                depth={depth + 1}
+                draggedNodes={draggedNodes}
+                collapsed={entry.collapsed}
+                id={entry.id}
+                onStartSelect={onStartSelect}
+                onStartDrag={onStartDrag}
+                onCancelDrag={onCancelDrag}
+                entries={entry.children ?? []}
+                chain={[...chain, id]}
+                selection={selection}
+                onToggleCollapse={onToggleCollapse}
+              />
+            ))}
+        </EntryChildren>
+      )}
+    </EntryWrapper>
+  );
+};
+
+export default Entry;

frontend/src/Outline/Styles.ts

@@ -0,0 +1,164 @@
+import styled, { css } from 'styled-components';
+import { mixin } from 'shared/utils/styles';
+
+export const EntryWrapper = styled.div<{ isDragging: boolean; isSelected: boolean }>`
+  position: relative;
+  ${props =>
+    props.isDragging &&
+    css`
+      &:before {
+        border-radius: 3px;
+        content: '';
+        position: absolute;
+        top: 2px;
+        right: -5px;
+        left: -5px;
+        bottom: -2px;
+        background-color: #eceef0;
+      }
+    `}
+  ${props =>
+    props.isSelected &&
+    css`
+      &:before {
+        border-radius: 3px;
+        content: '';
+        position: absolute;
+        top: 2px;
+        right: -5px;
+        bottom: -2px;
+        left: -5px;
+        background-color: ${mixin.rgba(props.theme.colors.primary, 0.75)};
+      }
+    `}
+`;
+
+export const EntryChildren = styled.div<{ isRoot: boolean }>`
+  position: relative;
+  ${props =>
+    !props.isRoot &&
+    css`
+      margin-left: 10px;
+      padding-left: 25px;
+      border-left: 1px solid ${mixin.rgba(props.theme.colors.text.primary, 0.6)};
+    `}
+`;
+
+export const PageContent = styled.div`
+  min-height: calc(100vh - 146px);
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-shadow: none;
+  user-select: none;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 700px;
+  padding-left: 56px;
+  padding-right: 56px;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  text-size-adjust: none;
+`;
+
+export const DragHandle = styled.div<{ top: number; left: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  transform: translate3d(${props => props.left}px, ${props => props.top}px, 0);
+  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
+  width: 18px;
+  height: 18px;
+  color: rgb(75, 81, 85);
+  border-radius: 9px;
+`;
+export const RootWrapper = styled.div``;
+
+export const EntryHandle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 501px;
+  top: 7px;
+  width: 18px;
+  height: 18px;
+  color: ${p => p.theme.colors.text.primary};
+  border-radius: 9px;
+  &:hover {
+    background: ${p => p.theme.colors.primary};
+  }
+  svg {
+    fill: ${p => p.theme.colors.text.primary};
+    stroke: ${p => p.theme.colors.text.primary};
+  }
+`;
+
+export const EntryInnerContent = styled.div`
+  padding-top: 4px;
+  font-size: 15px;
+  white-space: pre-wrap;
+  line-height: 24px;
+  min-height: 24px;
+  overflow-wrap: break-word;
+  position: relative;
+  user-select: text;
+  color: ${p => p.theme.colors.text.primary};
+  &::selection {
+    background: #a49de8;
+  }
+  &:focus {
+    outline: 0;
+  }
+`;
+
+export const DragDebugWrapper = styled.div`
+  position: absolute;
+  left: 42px;
+  bottom: 24px;
+  color: #fff;
+`;
+
+export const DragIndicatorBar = styled.div<{ left: number; top: number; width: number }>`
+  position: absolute;
+  width: ${props => props.width}px;
+  top: ${props => props.top}px;
+  left: ${props => props.left}px;
+  height: 4px;
+  border-radius: 3px;
+  background: rgb(204, 204, 204);
+`;
+
+export const ExpandButton = styled.div`
+  top: 6px;
+  cursor: default;
+  color: transparent;
+  position: absolute;
+  top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 478px;
+  width: 20px;
+  height: 20px;
+  svg {
+    fill: transparent;
+  }
+`;
+export const EntryContent = styled.div`
+  position: relative;
+  margin-left: -500px;
+  padding-left: 524px;
+
+  &:hover ${ExpandButton} svg {
+    fill: ${props => props.theme.colors.text.primary};
+  }
+`;
+
+export const PageContainer = styled.div`
+  overflow: scroll;
+`;

frontend/src/Outline/index.tsx

@@ -0,0 +1,504 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback, useContext, memo, createRef } from 'react';
+import { DotCircle } from 'shared/icons';
+import styled from 'styled-components/macro';
+import GlobalTopNavbar from 'App/TopNavbar';
+import _ from 'lodash';
+import produce from 'immer';
+import Entry from './Entry';
+import DragIndicator from './DragIndicator';
+import Dragger from './Dragger';
+import DragDebug from './DragDebug';
+import { DragContext } from './useDrag';
+
+import {
+  PageContainer,
+  DragDebugWrapper,
+  DragIndicatorBar,
+  PageContent,
+  EntryChildren,
+  EntryInnerContent,
+  EntryWrapper,
+  EntryContent,
+  RootWrapper,
+  EntryHandle,
+} from './Styles';
+import {
+  transformToTree,
+  findNode,
+  findNodeDepth,
+  getNumberOfChildren,
+  validateDepth,
+  getDimensions,
+  findNextDraggable,
+  getNodeOver,
+  getCorrectNode,
+  findCommonParent,
+} from './utils';
+import NOOP from 'shared/utils/noop';
+
+type OutlineCommand = {
+  nodes: Array<{
+    id: string;
+    prev: { position: number; parent: string | null };
+    next: { position: number; parent: string | null };
+  }>;
+};
+
+type ItemCollapsed = {
+  id: string;
+  collapsed: boolean;
+};
+
+const listItems: Array<ItemElement> = [
+  { id: 'root', position: 4096, parent: null, collapsed: false },
+  { id: 'entry-1', position: 4096, parent: 'root', collapsed: false },
+  { id: 'entry-1_3', position: 4096 * 3, parent: 'entry-1', collapsed: false },
+  { id: 'entry-1_3_1', position: 4096, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_2', position: 4096 * 2, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_3', position: 4096 * 3, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_3_1', position: 4096 * 1, parent: 'entry-1_3_3', collapsed: false },
+  { id: 'entry-1_3_3_1_1', position: 4096 * 1, parent: 'entry-1_3_3_1', collapsed: false },
+  { id: 'entry-2', position: 4096 * 2, parent: 'root', collapsed: false },
+  { id: 'entry-3', position: 4096 * 3, parent: 'root', collapsed: false },
+  { id: 'entry-4', position: 4096 * 4, parent: 'root', collapsed: false },
+  { id: 'entry-5', position: 4096 * 5, parent: 'root', collapsed: false },
+];
+
+const Outline: React.FC = () => {
+  const [items, setItems] = useState(listItems);
+  const [selecting, setSelecting] = useState<{
+    isSelecting: boolean;
+    node: { id: string; depth: number } | null;
+  }>({ isSelecting: false, node: null });
+  const [selection, setSelection] = useState<null | { nodes: Array<{ id: string }>; first?: OutlineNode | null }>(null);
+  const [dragging, setDragging] = useState<{
+    show: boolean;
+    draggedNodes: null | Array<string>;
+    initialPos: { x: number; y: number };
+  }>({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+  const [impact, setImpact] = useState<null | {
+    listPosition: number;
+    zone: ImpactZone;
+    depthTarget: number;
+  }>(null);
+  const selectRef = useRef<{ isSelecting: boolean; hasSelection: boolean; node: { id: string; depth: number } | null }>(
+    {
+      isSelecting: false,
+      node: null,
+      hasSelection: false,
+    },
+  );
+  const impactRef = useRef<null | { listPosition: number; depth: number; zone: ImpactZone }>(null);
+  useEffect(() => {
+    if (impact) {
+      impactRef.current = { zone: impact.zone, depth: impact.depthTarget, listPosition: impact.listPosition };
+    }
+  }, [impact]);
+  useEffect(() => {
+    selectRef.current.isSelecting = selecting.isSelecting;
+    selectRef.current.node = selecting.node;
+  }, [selecting]);
+
+  const $content = useRef<HTMLDivElement>(null);
+  const outline = useRef<OutlineData>({
+    published: new Map<string, string>(),
+    dimensions: new Map<string, NodeDimensions>(),
+    nodes: new Map<number, Map<string, OutlineNode>>(),
+    relationships: new Map<string, NodeRelationships>(),
+  });
+
+  const tree = transformToTree(_.cloneDeep(items));
+  let root: any = null;
+  if (tree.length === 1) {
+    root = tree[0];
+  }
+  const outlineHistory = useRef<{ commands: Array<OutlineCommand>; current: number }>({ current: -1, commands: [] });
+
+  useEffect(() => {
+    outline.current.relationships = new Map<string, NodeRelationships>();
+    outline.current.published = new Map<string, string>();
+    outline.current.nodes = new Map<number, Map<string, OutlineNode>>();
+    const collapsedMap = items.reduce((map, next) => {
+      if (next.collapsed) {
+        map.set(next.id, true);
+      }
+      return map;
+    }, new Map<string, boolean>());
+    items.forEach(item => outline.current.published.set(item.id, item.parent ?? 'root'));
+
+    for (let i = 0; i < items.length; i++) {
+      const { collapsed, position, id, parent: curParent } = items[i];
+      if (id === 'root') {
+        continue;
+      }
+      const parent = curParent ?? 'root';
+      outline.current.published.set(id, parent ?? 'root');
+      const { depth, ancestors } = findNodeDepth(outline.current.published, id);
+      const collapsedParent = ancestors.slice(0, -1).find(a => collapsedMap.get(a));
+      if (collapsedParent) {
+        continue;
+      }
+      const children = getNumberOfChildren(root, ancestors);
+      if (!outline.current.nodes.has(depth)) {
+        outline.current.nodes.set(depth, new Map<string, OutlineNode>());
+      }
+      const targetDepthNodes = outline.current.nodes.get(depth);
+      if (targetDepthNodes) {
+        targetDepthNodes.set(id, {
+          id,
+          children,
+          position,
+          depth,
+          ancestors,
+          collapsed,
+          parent,
+        });
+      }
+      if (!outline.current.relationships.has(parent)) {
+        outline.current.relationships.set(parent, {
+          self: {
+            depth: depth - 1,
+            id: parent,
+          },
+          children: [],
+          numberOfSubChildren: 0,
+        });
+      }
+      const nodeRelations = outline.current.relationships.get(parent);
+      if (nodeRelations) {
+        outline.current.relationships.set(parent, {
+          self: nodeRelations.self,
+          numberOfSubChildren: nodeRelations.numberOfSubChildren + children,
+          children: [...nodeRelations.children, { id, position, depth, children }].sort(
+            (a, b) => a.position - b.position,
+          ),
+        });
+      }
+    }
+  }, [items]);
+  const handleKeyDown = useCallback(e => {
+    if (e.code === 'KeyZ' && e.ctrlKey) {
+      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current];
+      if (currentCommand) {
+        setItems(prevItems =>
+          produce(prevItems, draftItems => {
+            currentCommand.nodes.forEach(node => {
+              const idx = prevItems.findIndex(c => c.id === node.id);
+              if (idx !== -1) {
+                draftItems[idx].parent = node.prev.parent;
+                draftItems[idx].position = node.prev.position;
+              }
+            });
+            outlineHistory.current.current--;
+          }),
+        );
+      }
+    } else if (e.code === 'KeyY' && e.ctrlKey) {
+      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current + 1];
+      if (currentCommand) {
+        setItems(prevItems =>
+          produce(prevItems, draftItems => {
+            currentCommand.nodes.forEach(node => {
+              const idx = prevItems.findIndex(c => c.id === node.id);
+              if (idx !== -1) {
+                draftItems[idx].parent = node.next.parent;
+                draftItems[idx].position = node.next.position;
+              }
+            });
+            outlineHistory.current.current++;
+          }),
+        );
+      }
+    }
+  }, []);
+
+  const handleMouseUp = useCallback(
+    e => {
+      if (selectRef.current.hasSelection && !selectRef.current.isSelecting) {
+        setSelection(null);
+      }
+      if (selectRef.current.isSelecting) {
+        setSelecting({ isSelecting: false, node: null });
+      }
+    },
+    [dragging, selecting],
+  );
+  const handleMouseMove = useCallback(e => {
+    if (selectRef.current.isSelecting && selectRef.current.node) {
+      const { clientX, clientY } = e;
+      const dimensions = outline.current.dimensions.get(selectRef.current.node.id);
+      if (dimensions) {
+        const entry = getDimensions(dimensions.entry);
+        if (entry) {
+          const isAbove = clientY < entry.top;
+          const isBelow = clientY > entry.bottom;
+          if (!isAbove && !isBelow && selectRef.current.hasSelection) {
+            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
+            const aboveNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
+            if (aboveNode) {
+              setSelection({ nodes: [{ id: selectRef.current.node.id }], first: aboveNode });
+              selectRef.current.hasSelection = false;
+            }
+          }
+          if (isAbove || isBelow) {
+            e.preventDefault();
+            const { curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
+            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
+            const selectedNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
+            let aboveNode: OutlineNode | undefined | null = null;
+            let belowNode: OutlineNode | undefined | null = null;
+            if (isBelow) {
+              aboveNode = selectedNode;
+              belowNode = curDraggable;
+            } else {
+              aboveNode = curDraggable;
+              belowNode = selectedNode;
+            }
+            if (aboveNode && belowNode) {
+              const aboveDim = outline.current.dimensions.get(aboveNode.id);
+              const belowDim = outline.current.dimensions.get(belowNode.id);
+              if (aboveDim && belowDim) {
+                const aboveDimBounds = getDimensions(aboveDim.entry);
+                const belowDimBounds = getDimensions(belowDim.children ? belowDim.children : belowDim.entry);
+                const aboveDimY = aboveDimBounds ? aboveDimBounds.bottom : 0;
+                const belowDimY = belowDimBounds ? belowDimBounds.top : 0;
+                const inbetweenNodes: Array<{ id: string }> = [];
+                for (const [id, dimension] of outline.current.dimensions.entries()) {
+                  if (id === aboveNode.id || id === belowNode.id) {
+                    inbetweenNodes.push({ id });
+                    continue;
+                  }
+                  const targetNodeBounds = getDimensions(dimension.entry);
+                  if (targetNodeBounds) {
+                    if (
+                      Math.round(aboveDimY) <= Math.round(targetNodeBounds.top) &&
+                      Math.round(belowDimY) >= Math.round(targetNodeBounds.bottom)
+                    ) {
+                      inbetweenNodes.push({ id });
+                    }
+                  }
+                }
+                const filteredNodes = inbetweenNodes.filter(n => {
+                  const parent = outline.current.published.get(n.id);
+                  if (parent) {
+                    const foundParent = inbetweenNodes.find(c => c.id === parent);
+                    if (foundParent) {
+                      return false;
+                    }
+                  }
+                  return true;
+                });
+                selectRef.current.hasSelection = true;
+                setSelection({ nodes: filteredNodes, first: aboveNode });
+              }
+            }
+          }
+        }
+      }
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.addEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  if (!root) {
+    return null;
+  }
+  return (
+    <>
+      <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
+      <DragContext.Provider
+        value={{
+          outline,
+          impact,
+          setImpact: data => {
+            if (data) {
+              const { zone, depth } = data;
+              let listPosition = 65535;
+              if (zone.above && zone.above.node.depth + 1 <= depth && zone.above.node.collapsed) {
+                const aboveChildren = items
+                  .filter(i => (zone.above ? i.parent === zone.above.node.id : false))
+                  .sort((a, b) => a.position - b.position);
+                const lastChild = aboveChildren[aboveChildren.length - 1];
+                if (lastChild) {
+                  listPosition = lastChild.position * 2.0;
+                }
+              } else {
+                console.log(zone.above);
+                console.log(zone.below);
+                const correctNode = getCorrectNode(outline.current, zone.above ? zone.above.node : null, depth);
+                console.log(correctNode);
+                const listAbove = validateDepth(correctNode, depth);
+                const listBelow = validateDepth(zone.below ? zone.below.node : null, depth);
+                console.log(listAbove, listBelow);
+                if (listAbove && listBelow) {
+                  listPosition = (listAbove.position + listBelow.position) / 2.0;
+                } else if (listAbove && !listBelow) {
+                  listPosition = listAbove.position * 2.0;
+                } else if (!listAbove && listBelow) {
+                  listPosition = listBelow.position / 2.0;
+                }
+              }
+
+              if (!zone.above && zone.below) {
+                const newPosition = zone.below.node.position / 2.0;
+                setImpact(() => ({
+                  zone,
+                  listPosition: newPosition,
+                  depthTarget: depth,
+                }));
+              }
+              if (zone.above) {
+                // console.log(`prev=${prev} next=${next} targetPosition=${targetPosition}`);
+                // let targetID = depthTarget === 1 ? 'root' : node.ancestors[depthTarget - 1];
+                // targetID = targetID ?? node.id;
+                setImpact(() => ({
+                  zone,
+                  listPosition,
+                  depthTarget: depth,
+                }));
+              }
+            } else {
+              setImpact(null);
+            }
+          },
+          setNodeDimensions: (nodeID, ref) => {
+            outline.current.dimensions.set(nodeID, ref);
+          },
+          clearNodeDimensions: nodeID => {
+            outline.current.dimensions.delete(nodeID);
+          },
+        }}
+      >
+        <>
+          <PageContainer>
+            <PageContent>
+              <RootWrapper ref={$content}>
+                <Entry
+                  onStartSelect={({ id, depth }) => {
+                    setSelection(null);
+                    setSelecting({ isSelecting: true, node: { id, depth } });
+                  }}
+                  onToggleCollapse={(id, collapsed) => {
+                    setItems(prevItems =>
+                      produce(prevItems, draftItems => {
+                        const idx = prevItems.findIndex(c => c.id === id);
+                        if (idx !== -1) {
+                          draftItems[idx].collapsed = collapsed;
+                        }
+                      }),
+                    );
+                  }}
+                  id="root"
+                  parentID="root"
+                  isRoot
+                  selection={selection ? selection.nodes : null}
+                  draggedNodes={dragging.draggedNodes}
+                  position={root.position}
+                  entries={root.children}
+                  onCancelDrag={() => {
+                    setImpact(null);
+                    setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+                  }}
+                  onStartDrag={e => {
+                    if (e.id !== 'root') {
+                      if (selectRef.current.hasSelection && selection && selection.nodes.find(c => c.id === e.id)) {
+                        setImpact(null);
+                        setDragging({
+                          show: true,
+                          draggedNodes: [...selection.nodes.map(c => c.id)],
+                          initialPos: { x: e.clientX, y: e.clientY },
+                        });
+                      } else {
+                        setImpact(null);
+                        setDragging({ show: true, draggedNodes: [e.id], initialPos: { x: e.clientX, y: e.clientY } });
+                      }
+                    }
+                  }}
+                />
+              </RootWrapper>
+            </PageContent>
+          </PageContainer>
+          {dragging.show && dragging.draggedNodes && (
+            <Dragger
+              container={$content}
+              initialPos={dragging.initialPos}
+              draggedNodes={{ nodes: dragging.draggedNodes, first: selection ? selection.first : null }}
+              isDragging={dragging.show}
+              onDragEnd={() => {
+                if (dragging.draggedNodes && impactRef.current) {
+                  const { zone, depth, listPosition } = impactRef.current;
+                  const noZone = !zone.above && !zone.below;
+                  if (!noZone) {
+                    let parentID = 'root';
+                    if (zone.above) {
+                      parentID = zone.above.node.ancestors[depth - 1];
+                    }
+                    let reparent = true;
+                    for (let i = 0; i < dragging.draggedNodes.length; i++) {
+                      const draggedID = dragging.draggedNodes[i];
+                      const prevItem = items.find(i => i.id === draggedID);
+                      if (prevItem && prevItem.position === listPosition && prevItem.parent === parentID) {
+                        reparent = false;
+                        break;
+                      }
+                    }
+                    // TODO: set reparent if list position changed but parent did not
+                    //
+
+                    if (reparent) {
+                      // UPDATE OUTLINE DATA AFTER NODE MOVE
+                      setItems(itemsPrev =>
+                        produce(itemsPrev, draftItems => {
+                          if (dragging.draggedNodes) {
+                            const command: OutlineCommand = { nodes: [] };
+                            outlineHistory.current.current += 1;
+                            dragging.draggedNodes.forEach(n => {
+                              const curDragging = itemsPrev.findIndex(i => i.id === n);
+                              command.nodes.push({
+                                id: n,
+                                prev: {
+                                  parent: draftItems[curDragging].parent,
+                                  position: draftItems[curDragging].position,
+                                },
+                                next: {
+                                  parent: parentID,
+                                  position: listPosition,
+                                },
+                              });
+                              draftItems[curDragging].parent = parentID;
+                              draftItems[curDragging].position = listPosition;
+                            });
+                            outlineHistory.current.commands[outlineHistory.current.current] = command;
+                            if (outlineHistory.current.commands[outlineHistory.current.current + 1]) {
+                              outlineHistory.current.commands.splice(outlineHistory.current.current + 1);
+                            }
+                          }
+                        }),
+                      );
+                    }
+                  }
+                }
+                setImpact(null);
+                setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+              }}
+            />
+          )}
+        </>
+      </DragContext.Provider>
+      {impact && <DragIndicator depthTarget={impact.depthTarget} container={$content} zone={impact.zone} />}
+      {impact && (
+        <DragDebug zone={impact.zone ?? null} draggedNodes={dragging.draggedNodes} depthTarget={impact.depthTarget} />
+      )}
+    </>
+  );
+};
+
+export default Outline;

frontend/src/Outline/useDrag.ts

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+
+type DragContextData = {
+  impact: null | { zone: ImpactZone; depthTarget: number };
+  outline: React.MutableRefObject<OutlineData>;
+  setNodeDimensions: (
+    nodeID: string,
+    ref: { entry: React.RefObject<HTMLElement>; children: React.RefObject<HTMLElement> | null },
+  ) => void;
+  clearNodeDimensions: (nodeID: string) => void;
+  setImpact: (data: ImpactData | null) => void;
+};
+
+export const DragContext = React.createContext<DragContextData | null>(null);
+
+export const useDrag = () => {
+  const ctx = useContext(DragContext);
+  if (ctx) {
+    return ctx;
+  }
+  throw new Error('context is null');
+};

frontend/src/Outline/utils.ts

@@ -0,0 +1,361 @@
+import _ from 'lodash';
+
+export function getCorrectNode(data: OutlineData, node: OutlineNode | null, depth: number) {
+  if (node) {
+    console.log(depth, node);
+    if (depth === node.depth) {
+      return node;
+    }
+    const parent = node.ancestors[depth];
+    console.log('parent', parent);
+    if (parent) {
+      const parentNode = data.relationships.get(parent);
+      if (parentNode) {
+        const parentDepth = parentNode.self.depth;
+        const nodeDepth = data.nodes.get(parentDepth);
+        return nodeDepth ? nodeDepth.get(parent) : null;
+      }
+    }
+  }
+  return null;
+}
+export function validateDepth(node: OutlineNode | null | undefined, depth: number) {
+  if (node) {
+    return node.depth === depth ? node : null;
+  }
+  return null;
+}
+
+export function getNodeAbove(node: OutlineNode, startingParent: RelationshipChild, outline: OutlineData) {
+  let hasChildren = true;
+  let nodeAbove: null | RelationshipChild = null;
+  let aboveTargetID = startingParent.id;
+  while (hasChildren) {
+    const targetParent = outline.relationships.get(aboveTargetID);
+    if (targetParent) {
+      const parentNodes = outline.nodes.get(targetParent.self.depth);
+      const parentNode = parentNodes ? parentNodes.get(targetParent.self.id) : null;
+      if (targetParent.children.length === 0) {
+        if (parentNode) {
+          nodeAbove = {
+            id: parentNode.id,
+            depth: parentNode.depth,
+            position: parentNode.position,
+            children: parentNode.children,
+          };
+          console.log('node above', nodeAbove);
+        }
+        hasChildren = false;
+        continue;
+      }
+      nodeAbove = targetParent.children[targetParent.children.length - 1];
+      if (targetParent.numberOfSubChildren === 0) {
+        hasChildren = false;
+      } else {
+        aboveTargetID = nodeAbove.id;
+      }
+    } else {
+      const target = outline.relationships.get(node.ancestors[0]);
+      if (target) {
+        const targetChild = target.children.find(i => i.id === aboveTargetID);
+        if (targetChild) {
+          nodeAbove = targetChild;
+        }
+        hasChildren = false;
+      }
+    }
+  }
+  console.log('final node above', nodeAbove);
+  return nodeAbove;
+}
+
+export function getBelowParent(node: OutlineNode, outline: OutlineData) {
+  const { relationships, nodes } = outline;
+  const parentDepth = nodes.get(node.depth - 1);
+  const parent = parentDepth ? parentDepth.get(node.parent) : null;
+  if (parent) {
+    const grandfather = relationships.get(parent.parent);
+    if (grandfather) {
+      const parentIndex = grandfather.children.findIndex(c => c.id === parent.id);
+      if (parentIndex !== -1) {
+        if (parentIndex === grandfather.children.length - 1) {
+          const root = relationships.get(node.ancestors[0]);
+          if (root) {
+            const ancestorIndex = root.children.findIndex(c => c.id === node.ancestors[1]);
+            if (ancestorIndex !== -1) {
+              const nextAncestor = root.children[ancestorIndex + 1];
+              if (nextAncestor) {
+                return nextAncestor;
+              }
+            }
+          }
+        } else {
+          const nextChild = grandfather.children[parentIndex + 1];
+          if (nextChild) {
+            return nextChild;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
+
+export function getDimensions(ref: React.RefObject<HTMLElement> | null | undefined) {
+  if (ref && ref.current) {
+    return ref.current.getBoundingClientRect();
+  }
+  return null;
+}
+
+export function getTargetDepth(mouseX: number, handleLeft: number, availableDepths: { min: number; max: number }) {
+  if (mouseX > handleLeft) {
+    return availableDepths.max;
+  }
+  let curDepth = availableDepths.max - 1;
+  for (let x = availableDepths.min; x < availableDepths.max; x++) {
+    const breakpoint = handleLeft - x * 35;
+    // console.log(`mouseX=${mouseX} breakpoint=${breakpoint} x=${x} curDepth=${curDepth}`);
+    if (mouseX > breakpoint) {
+      return curDepth;
+    }
+    curDepth -= 1;
+  }
+
+  return availableDepths.min;
+}
+
+export function findNextDraggable(pos: { x: number; y: number }, outline: OutlineData, curDepth: number) {
+  let index = 0;
+  const currentDepthNodes = outline.nodes.get(curDepth);
+  let nodeAbove: null | RelationshipChild = null;
+  if (!currentDepthNodes) {
+    return null;
+  }
+  for (const [id, node] of currentDepthNodes) {
+    const dimensions = outline.dimensions.get(id);
+    const target = dimensions ? getDimensions(dimensions.entry) : null;
+    const children = dimensions ? getDimensions(dimensions.children) : null;
+    if (target) {
+      console.log(
+        `[${id}] ${pos.y} <= ${target.bottom} = ${pos.y <= target.bottom} / ${pos.y} >= ${target.top} = ${pos.y >=
+          target.top}`,
+      );
+      if (pos.y <= target.bottom && pos.y >= target.top) {
+        const middlePoint = target.top + target.height / 2;
+        const position: ImpactPosition = pos.y > middlePoint ? 'after' : 'before';
+        return {
+          found: true,
+          node,
+          position,
+        };
+      }
+    }
+    if (children) {
+      console.log(
+        `[${id}] ${pos.y} <= ${children.bottom} = ${pos.y <= children.bottom} / ${pos.y} >= ${children.top} = ${pos.y >=
+          children.top}`,
+      );
+      if (pos.y <= children.bottom && pos.y >= children.top) {
+        const position: ImpactPosition = 'after';
+        return { found: false, node, position };
+      }
+    }
+    index += 1;
+  }
+  return null;
+}
+
+export function transformToTree(arr: any) {
+  const nodes: any = {};
+  return arr.filter(function(obj: any) {
+    var id = obj['id'],
+      parentId = obj['parent'];
+
+    nodes[id] = _.defaults(obj, nodes[id], { children: [] });
+    parentId && (nodes[parentId] = nodes[parentId] || { children: [] })['children'].push(obj);
+
+    return !parentId;
+  });
+}
+
+export function findNode(parentID: string, nodeID: string, data: OutlineData) {
+  const nodeRelations = data.relationships.get(parentID);
+  if (nodeRelations) {
+    const nodeDepth = data.nodes.get(nodeRelations.self.depth + 1);
+    if (nodeDepth) {
+      const node = nodeDepth.get(nodeID);
+      return node ?? null;
+    }
+  }
+  return null;
+}
+
+export function findNodeDepth(published: Map<string, string>, id: string) {
+  let currentID = id;
+  let breaker = 0;
+  let depth = 0;
+  let ancestors = [id];
+  while (currentID !== 'root') {
+    const nextID = published.get(currentID);
+    if (nextID) {
+      ancestors = [nextID, ...ancestors];
+      currentID = nextID;
+      depth += 1;
+      breaker += 1;
+      if (breaker > 100) {
+        throw new Error('node depth breaker was thrown');
+      }
+    } else {
+      throw new Error('unable to find nextID');
+    }
+  }
+  return { depth, ancestors };
+}
+
+export function getNumberOfChildren(root: ItemElement, ancestors: Array<string>) {
+  let currentBranch = root;
+  for (let i = 1; i < ancestors.length; i++) {
+    const nextBranch = currentBranch.children ? currentBranch.children.find(c => c.id === ancestors[i]) : null;
+    if (nextBranch) {
+      currentBranch = nextBranch;
+    } else {
+      throw new Error('unable to find next branch');
+    }
+  }
+  return currentBranch.children ? currentBranch.children.length : 0;
+}
+
+export function findNodeAbove(outline: OutlineData, curDepth: number, belowNode: OutlineNode) {
+  let targetAboveNode: null | RelationshipChild = null;
+  if (curDepth === 1) {
+    const relations = outline.relationships.get(belowNode.ancestors[0]);
+    if (relations) {
+      const parentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.ancestors[1]);
+      if (parentIndex !== -1) {
+        const aboveParent = relations.children[parentIndex - 1];
+        if (parentIndex === 0) {
+          targetAboveNode = null;
+        } else {
+          targetAboveNode = getNodeAbove(belowNode, aboveParent, outline);
+        }
+      }
+    }
+  } else {
+    const relations = outline.relationships.get(belowNode.parent);
+    if (relations) {
+      const currentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.id);
+      // is first child, so use parent
+      if (currentIndex === 0) {
+        const parentNodes = outline.nodes.get(belowNode.depth - 1);
+        const parentNode = parentNodes ? parentNodes.get(belowNode.parent) : null;
+        if (parentNode) {
+          targetAboveNode = {
+            id: belowNode.parent,
+            depth: belowNode.depth - 1,
+            position: parentNode.position,
+            children: parentNode.children,
+          };
+        }
+      } else if (currentIndex !== -1) {
+        // is not first child, so first prev sibling
+        const aboveParentNode = relations.children[currentIndex - 1];
+        if (aboveParentNode) {
+          targetAboveNode = getNodeAbove(belowNode, aboveParentNode, outline);
+          if (targetAboveNode === null) {
+            targetAboveNode = aboveParentNode;
+          }
+        }
+      }
+    }
+  }
+  if (targetAboveNode) {
+    const depthNodes = outline.nodes.get(targetAboveNode.depth);
+    if (depthNodes) {
+      return depthNodes.get(targetAboveNode.id) ?? null;
+    }
+  }
+  return null;
+}
+
+export function getNodeOver(mouse: { x: number; y: number }, outline: OutlineData) {
+  let curDepth = 1;
+  let curDraggables: any;
+  let curDraggable: any;
+  let curPosition: ImpactPosition = 'after';
+  while (outline.nodes.size + 1 > curDepth) {
+    curDraggables = outline.nodes.get(curDepth);
+    if (curDraggables) {
+      const nextDraggable = findNextDraggable(mouse, outline, curDepth);
+      if (nextDraggable) {
+        curDraggable = nextDraggable.node;
+        curPosition = nextDraggable.position;
+        if (nextDraggable.found) {
+          break;
+        }
+        curDepth += 1;
+      } else {
+        break;
+      }
+    }
+  }
+  return {
+    curDepth,
+    curDraggable,
+    curPosition,
+  };
+}
+
+export function findCommonParent(outline: OutlineData, aboveNode: OutlineNode, belowNode: OutlineNode) {
+  let aboveParentID = null;
+  let depth = 0;
+  for (let aIdx = aboveNode.ancestors.length - 1; aIdx !== 0; aIdx--) {
+    depth = aIdx;
+    const aboveNodeParent = aboveNode.ancestors[aIdx];
+    for (let bIdx = belowNode.ancestors.length - 1; bIdx !== 0; bIdx--) {
+      if (belowNode.ancestors[bIdx] === aboveNodeParent) {
+        aboveParentID = aboveNodeParent;
+      }
+    }
+  }
+  if (aboveParentID) {
+    const parent = outline.relationships.get(aboveParentID) ?? null;
+    if (parent) {
+      return {
+        parent,
+        depth,
+      };
+    }
+    return null;
+  }
+  return null;
+}
+
+export function getLastChildInBranch(outline: OutlineData, lastParentNode: OutlineNode) {
+  let curParentRelation = outline.relationships.get(lastParentNode.id);
+  if (!curParentRelation) {
+    return { id: lastParentNode.id, depth: 1 };
+  }
+  let hasChildren = lastParentNode.children !== 0;
+  let depth = 1;
+  let finalID: null | string = null;
+  while (hasChildren) {
+    if (curParentRelation) {
+      const lastChild = curParentRelation.children.sort((a, b) => a.position - b.position)[
+        curParentRelation.children.length - 1
+      ];
+      depth += 1;
+      if (lastChild.children === 0) {
+        finalID = lastChild.id;
+        break;
+      }
+      curParentRelation = outline.relationships.get(lastChild.id);
+    } else {
+      hasChildren = false;
+    }
+  }
+  if (finalID !== null) {
+    return { id: finalID, depth };
+  }
+  return null;
+}