diff --git a/frontend/src/App/Routes.tsx b/frontend/src/App/Routes.tsx
index 6e7a4b0..2c656b5 100644
--- a/frontend/src/App/Routes.tsx
+++ b/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 = () => {
+
diff --git a/frontend/src/Outline/DragDebug.tsx b/frontend/src/Outline/DragDebug.tsx
new file mode 100644
index 0000000..c73d134
--- /dev/null
+++ b/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 | null;
+};
+
+const DragDebug: React.FC = ({ 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 (
+ {`aboveID=${aboveID} / belowID=${belowID} / depthTarget=${depthTarget} draggedNodes=${
+ draggedNodes ? draggedNodes.toString() : null
+ }`}
+ );
+};
+
+export default DragDebug;
diff --git a/frontend/src/Outline/DragIndicator.tsx b/frontend/src/Outline/DragIndicator.tsx
new file mode 100644
index 0000000..a067c94
--- /dev/null
+++ b/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;
+ zone: ImpactZone;
+ depthTarget: number;
+};
+
+const DragIndicator: React.FC = ({ 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 ;
+};
+
+export default DragIndicator;
diff --git a/frontend/src/Outline/Dragger.tsx b/frontend/src/Outline/Dragger.tsx
new file mode 100644
index 0000000..0eb516c
--- /dev/null
+++ b/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;
+ draggedNodes: { nodes: Array; first?: OutlineNode | null };
+ isDragging: boolean;
+ onDragEnd: (zone: ImpactZone) => void;
+ initialPos: { x: number; y: number };
+};
+
+const Dragger: React.FC = ({ draggedNodes, container, onDragEnd, isDragging, initialPos }) => {
+ const [pos, setPos] = useState<{ x: number; y: number }>(initialPos);
+ const { outline, impact, setImpact } = useDrag();
+ const $handle = useRef(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 && (
+
+
+
+ )}
+
+ );
+};
+
+export default Dragger;
diff --git a/frontend/src/Outline/Entry.tsx b/frontend/src/Outline/Entry.tsx
new file mode 100644
index 0000000..68fb65a
--- /dev/null
+++ b/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;
+ entries: Array;
+ onCancelDrag: () => void;
+ position: number;
+ chain?: Array;
+ depth?: number;
+};
+
+const Entry: React.FC = ({
+ id,
+ parentID,
+ isRoot = false,
+ selection,
+ onToggleCollapse,
+ onStartSelect,
+ position,
+ onCancelDrag,
+ onStartDrag,
+ collapsed = false,
+ draggedNodes,
+ entries,
+ chain = [],
+ depth = 0,
+}) => {
+ const $entry = useRef(null);
+ const $children = useRef(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 (
+
+ {!isRoot && (
+
+ {entries.length !== 0 && (
+ onToggleCollapse(id, !collapsed)}>
+ {collapsed ? : }
+
+ )}
+ {showHandle && (
+ onCancelDrag()}
+ onMouseDown={e => {
+ onStartDrag({ id, clientX: e.clientX, clientY: e.clientY });
+ }}
+ >
+
+
+ )}
+ {
+ 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}`}
+
+
+ )}
+ {entries.length !== 0 && !collapsed && (
+
+ {entries
+ .sort((a, b) => a.position - b.position)
+ .map(entry => (
+
+ ))}
+
+ )}
+
+ );
+};
+
+export default Entry;
diff --git a/frontend/src/Outline/Styles.ts b/frontend/src/Outline/Styles.ts
new file mode 100644
index 0000000..b981daf
--- /dev/null
+++ b/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;
+`;
diff --git a/frontend/src/Outline/index.tsx b/frontend/src/Outline/index.tsx
new file mode 100644
index 0000000..a0c649e
--- /dev/null
+++ b/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 = [
+ { 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; first?: OutlineNode | null }>(null);
+ const [dragging, setDragging] = useState<{
+ show: boolean;
+ draggedNodes: null | Array;
+ initialPos: { x: number; y: number };
+ }>({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+ const [impact, setImpact] = useState(null);
+ const selectRef = useRef<{ isSelecting: boolean; hasSelection: boolean; node: { id: string; depth: number } | null }>(
+ {
+ isSelecting: false,
+ node: null,
+ hasSelection: false,
+ },
+ );
+ const impactRef = useRef(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(null);
+ const outline = useRef({
+ published: new Map(),
+ dimensions: new Map(),
+ nodes: new Map>(),
+ relationships: new Map(),
+ });
+
+ const tree = transformToTree(_.cloneDeep(items));
+ let root: any = null;
+ if (tree.length === 1) {
+ root = tree[0];
+ }
+ const outlineHistory = useRef<{ commands: Array; current: number }>({ current: -1, commands: [] });
+
+ useEffect(() => {
+ outline.current.relationships = new Map();
+ outline.current.published = new Map();
+ outline.current.nodes = new Map>();
+ const collapsedMap = items.reduce((map, next) => {
+ if (next.collapsed) {
+ map.set(next.id, true);
+ }
+ return map;
+ }, new Map());
+ 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());
+ }
+ 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 (
+ <>
+
+ {
+ 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);
+ },
+ }}
+ >
+ <>
+
+
+
+ {
+ 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 } });
+ }
+ }
+ }}
+ />
+
+
+
+ {dragging.show && dragging.draggedNodes && (
+ {
+ 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 } });
+ }}
+ />
+ )}
+
+
+ {impact && }
+ {impact && (
+
+ )}
+
+ );
+};
+
+export default Outline;
diff --git a/frontend/src/Outline/useDrag.ts b/frontend/src/Outline/useDrag.ts
new file mode 100644
index 0000000..d94653c
--- /dev/null
+++ b/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;
+ setNodeDimensions: (
+ nodeID: string,
+ ref: { entry: React.RefObject; children: React.RefObject | null },
+ ) => void;
+ clearNodeDimensions: (nodeID: string) => void;
+ setImpact: (data: ImpactData | null) => void;
+};
+
+export const DragContext = React.createContext(null);
+
+export const useDrag = () => {
+ const ctx = useContext(DragContext);
+ if (ctx) {
+ return ctx;
+ }
+ throw new Error('context is null');
+};
diff --git a/frontend/src/Outline/utils.ts b/frontend/src/Outline/utils.ts
new file mode 100644
index 0000000..1220334
--- /dev/null
+++ b/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 | 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, 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) {
+ 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;
+}