From 19d302355f38d84736aa504323b882e83f9f6e95 Mon Sep 17 00:00:00 2001 From: Jordan Knott Date: Tue, 22 Dec 2020 13:05:46 -0600 Subject: [PATCH] feat: add outliner --- frontend/src/App/Routes.tsx | 2 + frontend/src/Outline/DragDebug.tsx | 24 ++ frontend/src/Outline/DragIndicator.tsx | 41 ++ frontend/src/Outline/Dragger.tsx | 242 ++++++++++++ frontend/src/Outline/Entry.tsx | 155 ++++++++ frontend/src/Outline/Styles.ts | 164 ++++++++ frontend/src/Outline/index.tsx | 504 +++++++++++++++++++++++++ frontend/src/Outline/useDrag.ts | 22 ++ frontend/src/Outline/utils.ts | 361 ++++++++++++++++++ 9 files changed, 1515 insertions(+) create mode 100644 frontend/src/Outline/DragDebug.tsx create mode 100644 frontend/src/Outline/DragIndicator.tsx create mode 100644 frontend/src/Outline/Dragger.tsx create mode 100644 frontend/src/Outline/Entry.tsx create mode 100644 frontend/src/Outline/Styles.ts create mode 100644 frontend/src/Outline/index.tsx create mode 100644 frontend/src/Outline/useDrag.ts create mode 100644 frontend/src/Outline/utils.ts 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; +}