feat: add outliner
This commit is contained in:
Jordan Knott
parent
f4ef7fec83
commit
19d302355f
@ -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>
|
||||
|
||||
24
frontend/src/Outline/DragDebug.tsx
Normal file
24
frontend/src/Outline/DragDebug.tsx
Normal file
@ -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;
|
||||
41
frontend/src/Outline/DragIndicator.tsx
Normal file
41
frontend/src/Outline/DragIndicator.tsx
Normal file
@ -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;
|
||||
242
frontend/src/Outline/Dragger.tsx
Normal file
242
frontend/src/Outline/Dragger.tsx
Normal file
@ -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;
|
||||
155
frontend/src/Outline/Entry.tsx
Normal file
155
frontend/src/Outline/Entry.tsx
Normal file
@ -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;
|
||||
164
frontend/src/Outline/Styles.ts
Normal file
164
frontend/src/Outline/Styles.ts
Normal file
@ -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;
|
||||
`;
|
||||
504
frontend/src/Outline/index.tsx
Normal file
504
frontend/src/Outline/index.tsx
Normal file
@ -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;
|
||||
22
frontend/src/Outline/useDrag.ts
Normal file
22
frontend/src/Outline/useDrag.ts
Normal file
@ -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');
|
||||
};
|
||||
361
frontend/src/Outline/utils.ts
Normal file
361
frontend/src/Outline/utils.ts
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user