Feat: Add draggable shell trees
This commit is contained in:
MangoPig
@@ -1,7 +1,7 @@
|
||||
// Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
|
||||
|
||||
import { For, Show, createMemo, createSignal, type JSX } from "solid-js";
|
||||
import { ChevronLeft, ChevronRight } from "../../../lib/icons";
|
||||
import { For, Show, createEffect, createSignal, onCleanup, onMount, type JSX } from "solid-js";
|
||||
import { ChevronLeft, ChevronRight, Folder } from "../../../lib/icons";
|
||||
import { useAppShellData } from "../data/app-shell.context";
|
||||
import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
|
||||
import {
|
||||
@@ -26,12 +26,276 @@ type WorkspaceSidebarProps = {
|
||||
onToggleRailCollapse: () => void;
|
||||
};
|
||||
|
||||
type PendingWorkspaceFolderDraft = {
|
||||
parentId: string | null;
|
||||
depth: number;
|
||||
};
|
||||
|
||||
type WorkspaceDragTarget = {
|
||||
parentId: string | null;
|
||||
index: number;
|
||||
intent: "before" | "after" | "inside";
|
||||
targetNodeId?: string;
|
||||
};
|
||||
|
||||
type WorkspaceDragState = {
|
||||
draggedNodeId: string;
|
||||
dropTarget: WorkspaceDragTarget | null;
|
||||
};
|
||||
|
||||
type WorkspaceNodeLocation = {
|
||||
parentId: string | null;
|
||||
index: number;
|
||||
node: WorkspaceTreeNode;
|
||||
};
|
||||
|
||||
const LONG_PRESS_MS = 320;
|
||||
|
||||
const createWorkspaceFolderId = (): string => `folder-${Math.random().toString(36).slice(2, 10)}`;
|
||||
|
||||
const getWorkspaceTreeNodeId = (node: WorkspaceTreeNode): string => node.id;
|
||||
|
||||
const insertWorkspaceFolderNode = (
|
||||
nodes: readonly WorkspaceTreeNode[],
|
||||
parentId: string | null,
|
||||
folder: WorkspaceTreeNode,
|
||||
): readonly WorkspaceTreeNode[] => {
|
||||
if (parentId === null) {
|
||||
return [...nodes, folder];
|
||||
}
|
||||
|
||||
return nodes.map((node) => {
|
||||
if (node.kind !== "folder") {
|
||||
return node;
|
||||
}
|
||||
|
||||
if (node.id === parentId) {
|
||||
return {
|
||||
...node,
|
||||
children: [...(node.children ?? []), folder],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...node,
|
||||
children: node.children ? insertWorkspaceFolderNode(node.children, parentId, folder) : node.children,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const findWorkspaceFolderDepth = (nodes: readonly WorkspaceTreeNode[], folderId: string, depth = 0): number | null => {
|
||||
for (const node of nodes) {
|
||||
if (node.kind !== "folder") {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (node.id === folderId) {
|
||||
return depth;
|
||||
}
|
||||
|
||||
const nestedDepth = node.children ? findWorkspaceFolderDepth(node.children, folderId, depth + 1) : null;
|
||||
if (nestedDepth !== null) {
|
||||
return nestedDepth;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const findWorkspaceNodeLocation = (
|
||||
nodes: readonly WorkspaceTreeNode[],
|
||||
nodeId: string,
|
||||
parentId: string | null = null,
|
||||
): WorkspaceNodeLocation | null => {
|
||||
for (let index = 0; index < nodes.length; index += 1) {
|
||||
const node = nodes[index];
|
||||
|
||||
if (node.id === nodeId) {
|
||||
return { parentId, index, node };
|
||||
}
|
||||
|
||||
if (node.kind === "folder" && node.children) {
|
||||
const nestedLocation = findWorkspaceNodeLocation(node.children, nodeId, node.id);
|
||||
|
||||
if (nestedLocation) {
|
||||
return nestedLocation;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const workspaceTreeContainsNode = (nodes: readonly WorkspaceTreeNode[], nodeId: string): boolean => {
|
||||
for (const node of nodes) {
|
||||
if (node.id === nodeId) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (node.kind === "folder" && node.children && workspaceTreeContainsNode(node.children, nodeId)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const removeWorkspaceTreeNode = (
|
||||
nodes: readonly WorkspaceTreeNode[],
|
||||
nodeId: string,
|
||||
): { nodes: WorkspaceTreeNode[]; removed: WorkspaceTreeNode | null } => {
|
||||
const nextNodes: WorkspaceTreeNode[] = [];
|
||||
let removed: WorkspaceTreeNode | null = null;
|
||||
|
||||
for (const node of nodes) {
|
||||
if (node.id === nodeId) {
|
||||
removed = node;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (node.kind === "folder" && node.children) {
|
||||
const result = removeWorkspaceTreeNode(node.children, nodeId);
|
||||
|
||||
if (result.removed) {
|
||||
removed = result.removed;
|
||||
nextNodes.push({
|
||||
...node,
|
||||
children: result.nodes,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
nextNodes.push(node);
|
||||
}
|
||||
|
||||
return { nodes: nextNodes, removed };
|
||||
};
|
||||
|
||||
const insertWorkspaceTreeNode = (
|
||||
nodes: readonly WorkspaceTreeNode[],
|
||||
parentId: string | null,
|
||||
index: number,
|
||||
nodeToInsert: WorkspaceTreeNode,
|
||||
): WorkspaceTreeNode[] => {
|
||||
if (parentId === null) {
|
||||
const nextNodes = [...nodes];
|
||||
nextNodes.splice(Math.max(0, Math.min(index, nextNodes.length)), 0, nodeToInsert);
|
||||
return nextNodes;
|
||||
}
|
||||
|
||||
return nodes.map((node) => {
|
||||
if (node.kind !== "folder") {
|
||||
return node;
|
||||
}
|
||||
|
||||
if (node.id === parentId) {
|
||||
const nextChildren = [...(node.children ?? [])];
|
||||
nextChildren.splice(Math.max(0, Math.min(index, nextChildren.length)), 0, nodeToInsert);
|
||||
return {
|
||||
...node,
|
||||
children: nextChildren,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...node,
|
||||
children: node.children ? insertWorkspaceTreeNode(node.children, parentId, index, nodeToInsert) : node.children,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const moveWorkspaceTreeNode = (
|
||||
nodes: readonly WorkspaceTreeNode[],
|
||||
draggedNodeId: string,
|
||||
dropTarget: WorkspaceDragTarget,
|
||||
): WorkspaceTreeNode[] => {
|
||||
const location = findWorkspaceNodeLocation(nodes, draggedNodeId);
|
||||
|
||||
if (!location) {
|
||||
return [...nodes];
|
||||
}
|
||||
|
||||
if (
|
||||
location.node.kind === "folder" &&
|
||||
dropTarget.parentId !== null &&
|
||||
((location.node.children && workspaceTreeContainsNode(location.node.children, dropTarget.parentId)) ||
|
||||
dropTarget.parentId === location.node.id)
|
||||
) {
|
||||
return [...nodes];
|
||||
}
|
||||
|
||||
let normalizedIndex = dropTarget.index;
|
||||
|
||||
if (dropTarget.parentId === location.parentId && dropTarget.index > location.index) {
|
||||
normalizedIndex -= 1;
|
||||
}
|
||||
|
||||
if (dropTarget.parentId === location.parentId && normalizedIndex === location.index) {
|
||||
return [...nodes];
|
||||
}
|
||||
|
||||
const removalResult = removeWorkspaceTreeNode(nodes, draggedNodeId);
|
||||
|
||||
if (!removalResult.removed) {
|
||||
return [...nodes];
|
||||
}
|
||||
|
||||
return insertWorkspaceTreeNode(removalResult.nodes, dropTarget.parentId, normalizedIndex, removalResult.removed);
|
||||
};
|
||||
|
||||
const FolderDraftRow = (props: {
|
||||
depth: number;
|
||||
value: string;
|
||||
onInput: (value: string) => void;
|
||||
onSubmit: () => void;
|
||||
onCancel: () => void;
|
||||
}): JSX.Element => {
|
||||
let inputRef: HTMLInputElement | undefined;
|
||||
|
||||
queueMicrotask(() => inputRef?.focus());
|
||||
|
||||
return (
|
||||
<li>
|
||||
<div class={styles.treeInputRow} style={{ "--tree-depth": String(props.depth) }}>
|
||||
<Folder class={styles.icon} size={18} strokeWidth={2} />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
class={styles.treeInput}
|
||||
value={props.value}
|
||||
placeholder="Folder name"
|
||||
onInput={(event): void => props.onInput(event.currentTarget.value)}
|
||||
onBlur={props.onSubmit}
|
||||
onKeyDown={(event): void => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
event.currentTarget.blur();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
props.onCancel();
|
||||
event.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const isContextMenuKeyboardTrigger = (event: KeyboardEvent): boolean => event.key === "ContextMenu" || (event.shiftKey && event.key === "F10");
|
||||
|
||||
const WorkspaceHomeEntry = (props: {
|
||||
item: WorkspaceStaticItem;
|
||||
onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
|
||||
onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
|
||||
onNodePointerDown: (event: PointerEvent, nodeId: string) => void;
|
||||
onNodePointerMove: (event: PointerEvent, parentId: string | null, index: number, node: WorkspaceTreeNode) => void;
|
||||
dragState: WorkspaceDragState | null;
|
||||
isTreeClickSuppressed: () => boolean;
|
||||
}): JSX.Element => {
|
||||
const Icon = props.item.icon;
|
||||
const target = createWorkspaceStaticTarget(props.item);
|
||||
@@ -75,18 +339,41 @@ const WorkspaceHomeEntry = (props: {
|
||||
|
||||
const WorkspaceTreeBranch = (props: {
|
||||
nodes: readonly WorkspaceTreeNode[];
|
||||
parentId?: string | null;
|
||||
depth?: number;
|
||||
isFolderCollapsed: (folderId: string) => boolean;
|
||||
onToggleFolder: (folderId: string) => void;
|
||||
pendingFolderDraft: PendingWorkspaceFolderDraft | null;
|
||||
pendingFolderName: string;
|
||||
onPendingFolderNameChange: (value: string) => void;
|
||||
onSubmitPendingFolder: () => void;
|
||||
onCancelPendingFolder: () => void;
|
||||
onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
|
||||
onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
|
||||
}): JSX.Element => {
|
||||
const depth = () => props.depth ?? 0;
|
||||
const parentId = () => props.parentId ?? null;
|
||||
|
||||
return (
|
||||
<ul class={styles.treeList} role="list">
|
||||
<Show when={props.nodes.length === 0 && props.pendingFolderDraft?.parentId !== parentId()}>
|
||||
<li>
|
||||
<div class={styles.treeEmptySlot} style={{ "--tree-depth": String(depth()) }} />
|
||||
</li>
|
||||
</Show>
|
||||
<For each={props.nodes}>
|
||||
{(node): JSX.Element => {
|
||||
{(node, indexAccessor): JSX.Element => {
|
||||
const Icon = getWorkspaceNodeIcon(node);
|
||||
const target = createWorkspaceTreeTarget(node);
|
||||
const isCollapsed = (): boolean => (node.kind === "folder" ? props.isFolderCollapsed(node.id) : false);
|
||||
const isDraggedNode = (): boolean => props.dragState?.draggedNodeId === node.id;
|
||||
const dropIntent = (): WorkspaceDragTarget["intent"] | null => {
|
||||
if (props.dragState?.dropTarget?.targetNodeId !== node.id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return props.dragState.dropTarget.intent;
|
||||
};
|
||||
|
||||
return (
|
||||
<li>
|
||||
@@ -96,8 +383,13 @@ const WorkspaceTreeBranch = (props: {
|
||||
[styles.treeItem]: true,
|
||||
[styles.treeItemActive]: !!node.active,
|
||||
[styles.treeItemFolder]: node.kind === "folder",
|
||||
[styles.treeItemDragging]: isDraggedNode(),
|
||||
[styles.treeItemDropBefore]: dropIntent() === "before",
|
||||
[styles.treeItemDropAfter]: dropIntent() === "after",
|
||||
[styles.treeItemDropInside]: dropIntent() === "inside",
|
||||
}}
|
||||
style={{ "--tree-depth": String(depth()) }}
|
||||
aria-expanded={node.kind === "folder" ? !isCollapsed() : undefined}
|
||||
aria-current={node.active ? "page" : undefined}
|
||||
aria-label={node.label}
|
||||
title={node.label}
|
||||
@@ -105,10 +397,28 @@ const WorkspaceTreeBranch = (props: {
|
||||
data-kind={node.kind}
|
||||
data-item-type={node.kind === "item" ? node.itemType : undefined}
|
||||
data-active={node.active ? "true" : "false"}
|
||||
onClick={(): void => {
|
||||
if (props.dragState || props.isTreeClickSuppressed()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.kind !== "folder") {
|
||||
return;
|
||||
}
|
||||
|
||||
props.onToggleFolder(node.id);
|
||||
}}
|
||||
onContextMenu={(event): void => {
|
||||
event.stopPropagation();
|
||||
props.onOpenContextMenu(event, target);
|
||||
}}
|
||||
onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
|
||||
onPointerMove={(event): void =>
|
||||
props.onNodePointerMove(event, parentId(), indexAccessor(), node)
|
||||
}
|
||||
onPointerEnter={(event): void =>
|
||||
props.onNodePointerMove(event, parentId(), indexAccessor(), node)
|
||||
}
|
||||
onKeyDown={(event): void => {
|
||||
if (!isContextMenuKeyboardTrigger(event)) {
|
||||
return;
|
||||
@@ -118,6 +428,16 @@ const WorkspaceTreeBranch = (props: {
|
||||
props.onOpenContextMenuFromKeyboard(event.currentTarget, target);
|
||||
}}
|
||||
>
|
||||
<Show when={node.kind === "folder"}>
|
||||
<ChevronRight
|
||||
classList={{
|
||||
[styles.folderChevron]: true,
|
||||
[styles.folderChevronOpen]: !isCollapsed(),
|
||||
}}
|
||||
size={16}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</Show>
|
||||
<Icon class={styles.icon} size={18} strokeWidth={2} />
|
||||
<span class={styles.label}>{node.label}</span>
|
||||
<Show when={node.meta}>
|
||||
@@ -125,18 +445,40 @@ const WorkspaceTreeBranch = (props: {
|
||||
</Show>
|
||||
</button>
|
||||
|
||||
<Show when={node.children?.length}>
|
||||
<Show when={node.kind === "folder" && !isCollapsed() && (((node.children?.length ?? 0) > 0) || props.pendingFolderDraft?.parentId === node.id)}>
|
||||
<WorkspaceTreeBranch
|
||||
nodes={node.children ?? []}
|
||||
parentId={node.id}
|
||||
depth={depth() + 1}
|
||||
isFolderCollapsed={props.isFolderCollapsed}
|
||||
onToggleFolder={props.onToggleFolder}
|
||||
pendingFolderDraft={props.pendingFolderDraft}
|
||||
pendingFolderName={props.pendingFolderName}
|
||||
onPendingFolderNameChange={props.onPendingFolderNameChange}
|
||||
onSubmitPendingFolder={props.onSubmitPendingFolder}
|
||||
onCancelPendingFolder={props.onCancelPendingFolder}
|
||||
onOpenContextMenu={props.onOpenContextMenu}
|
||||
onOpenContextMenuFromKeyboard={props.onOpenContextMenuFromKeyboard}
|
||||
onNodePointerDown={props.onNodePointerDown}
|
||||
onNodePointerMove={props.onNodePointerMove}
|
||||
dragState={props.dragState}
|
||||
isTreeClickSuppressed={props.isTreeClickSuppressed}
|
||||
/>
|
||||
</Show>
|
||||
</li>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
|
||||
<Show when={props.pendingFolderDraft && props.pendingFolderDraft.parentId === parentId()}>
|
||||
<FolderDraftRow
|
||||
depth={props.pendingFolderDraft?.depth ?? depth()}
|
||||
value={props.pendingFolderName}
|
||||
onInput={props.onPendingFolderNameChange}
|
||||
onSubmit={props.onSubmitPendingFolder}
|
||||
onCancel={props.onCancelPendingFolder}
|
||||
/>
|
||||
</Show>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
@@ -144,23 +486,209 @@ const WorkspaceTreeBranch = (props: {
|
||||
export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
|
||||
const appShellData = useAppShellData();
|
||||
const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);
|
||||
const [workspaceTreeNodes, setWorkspaceTreeNodes] = createSignal<readonly WorkspaceTreeNode[]>(appShellData.workspaceTree());
|
||||
const [collapsedFolderIds, setCollapsedFolderIds] = createSignal<readonly string[]>([]);
|
||||
const [pendingFolderDraft, setPendingFolderDraft] = createSignal<PendingWorkspaceFolderDraft | null>(null);
|
||||
const [pendingFolderName, setPendingFolderName] = createSignal("");
|
||||
const [dragState, setDragState] = createSignal<WorkspaceDragState | null>(null);
|
||||
const [suppressNextTreeClick, setSuppressNextTreeClick] = createSignal(false);
|
||||
const contextMenu = createWorkspaceContextMenuController();
|
||||
let longPressTimer: number | undefined;
|
||||
let suppressClickTimer: number | undefined;
|
||||
const railToggleLabel = (): string => (props.railCollapsed ? "Expand server rail" : "Collapse server rail");
|
||||
const sidebarContextMenuTarget = createMemo(() => createWorkspaceSurfaceTarget(appShellData.activeProject()));
|
||||
const contextMenuTarget = createMemo(() => contextMenu.menuState()?.target ?? null);
|
||||
const contextMenuPosition = createMemo(() => {
|
||||
const state = contextMenu.menuState();
|
||||
const sidebarContextMenuTarget = createWorkspaceSurfaceTarget(appShellData.activeProject());
|
||||
const isFolderCollapsed = (folderId: string): boolean => collapsedFolderIds().includes(folderId);
|
||||
const toggleFolder = (folderId: string): void => {
|
||||
setCollapsedFolderIds((current) =>
|
||||
current.includes(folderId) ? current.filter((id) => id !== folderId) : [...current, folderId],
|
||||
);
|
||||
};
|
||||
const clearLongPressTimer = (): void => {
|
||||
if (longPressTimer !== undefined) {
|
||||
window.clearTimeout(longPressTimer);
|
||||
longPressTimer = undefined;
|
||||
}
|
||||
};
|
||||
const suppressTreeClickTemporarily = (): void => {
|
||||
setSuppressNextTreeClick(true);
|
||||
|
||||
return state
|
||||
? {
|
||||
x: state.x,
|
||||
y: state.y,
|
||||
}
|
||||
: null;
|
||||
if (suppressClickTimer !== undefined) {
|
||||
window.clearTimeout(suppressClickTimer);
|
||||
}
|
||||
|
||||
suppressClickTimer = window.setTimeout(() => {
|
||||
setSuppressNextTreeClick(false);
|
||||
suppressClickTimer = undefined;
|
||||
}, 80);
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
setWorkspaceTreeNodes(appShellData.workspaceTree());
|
||||
setCollapsedFolderIds([]);
|
||||
setPendingFolderDraft(null);
|
||||
setPendingFolderName("");
|
||||
setDragState(null);
|
||||
});
|
||||
|
||||
const handleContextActionSelect = (_action: WorkspaceContextMenuAction, _target: WorkspaceContextMenuTarget): void => {
|
||||
// Initial implementation only establishes the menu IA and placement.
|
||||
onMount(() => {
|
||||
const handlePointerUp = (): void => {
|
||||
clearLongPressTimer();
|
||||
|
||||
const nextDragState = dragState();
|
||||
|
||||
if (!nextDragState?.dropTarget) {
|
||||
if (nextDragState) {
|
||||
suppressTreeClickTemporarily();
|
||||
}
|
||||
setDragState(null);
|
||||
return;
|
||||
}
|
||||
|
||||
suppressTreeClickTemporarily();
|
||||
setWorkspaceTreeNodes((current) =>
|
||||
moveWorkspaceTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as WorkspaceDragTarget),
|
||||
);
|
||||
setDragState(null);
|
||||
};
|
||||
|
||||
const handleEscape = (event: KeyboardEvent): void => {
|
||||
if (event.key !== "Escape") {
|
||||
return;
|
||||
}
|
||||
|
||||
clearLongPressTimer();
|
||||
|
||||
if (dragState()) {
|
||||
setDragState(null);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("pointerup", handlePointerUp);
|
||||
window.addEventListener("pointercancel", handlePointerUp);
|
||||
window.addEventListener("keydown", handleEscape);
|
||||
|
||||
onCleanup(() => {
|
||||
clearLongPressTimer();
|
||||
if (suppressClickTimer !== undefined) {
|
||||
window.clearTimeout(suppressClickTimer);
|
||||
}
|
||||
window.removeEventListener("pointerup", handlePointerUp);
|
||||
window.removeEventListener("pointercancel", handlePointerUp);
|
||||
window.removeEventListener("keydown", handleEscape);
|
||||
});
|
||||
});
|
||||
|
||||
const beginFolderDraft = (parentId: string | null, depth: number): void => {
|
||||
if (parentId) {
|
||||
setCollapsedFolderIds((current) => current.filter((id) => id !== parentId));
|
||||
}
|
||||
|
||||
setPendingFolderName("");
|
||||
setPendingFolderDraft({ parentId, depth });
|
||||
};
|
||||
|
||||
const submitPendingFolder = (): void => {
|
||||
const name = pendingFolderName().trim();
|
||||
const draft = pendingFolderDraft();
|
||||
|
||||
if (!draft) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!name) {
|
||||
setPendingFolderDraft(null);
|
||||
setPendingFolderName("");
|
||||
return;
|
||||
}
|
||||
|
||||
setWorkspaceTreeNodes((current) =>
|
||||
insertWorkspaceFolderNode(current, draft.parentId, {
|
||||
id: createWorkspaceFolderId(),
|
||||
label: name,
|
||||
kind: "folder",
|
||||
icon: Folder,
|
||||
children: [],
|
||||
}),
|
||||
);
|
||||
setPendingFolderDraft(null);
|
||||
setPendingFolderName("");
|
||||
};
|
||||
|
||||
const cancelPendingFolder = (): void => {
|
||||
setPendingFolderDraft(null);
|
||||
setPendingFolderName("");
|
||||
};
|
||||
|
||||
const handleNodePointerDown = (event: PointerEvent, nodeId: string): void => {
|
||||
if (event.button !== 0 || pendingFolderDraft()) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearLongPressTimer();
|
||||
longPressTimer = window.setTimeout(() => {
|
||||
suppressTreeClickTemporarily();
|
||||
setDragState({ draggedNodeId: nodeId, dropTarget: null });
|
||||
}, LONG_PRESS_MS);
|
||||
};
|
||||
|
||||
const handleNodePointerMove = (
|
||||
event: PointerEvent,
|
||||
parentId: string | null,
|
||||
index: number,
|
||||
node: WorkspaceTreeNode,
|
||||
): void => {
|
||||
const nextDragState = dragState();
|
||||
|
||||
if (!nextDragState || nextDragState.draggedNodeId === getWorkspaceTreeNodeId(node)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bounds = event.currentTarget.getBoundingClientRect();
|
||||
const relativeY = bounds.height <= 0 ? 0.5 : (event.clientY - bounds.top) / bounds.height;
|
||||
let nextTarget: WorkspaceDragTarget;
|
||||
|
||||
if (node.kind === "folder") {
|
||||
if (relativeY < 0.28) {
|
||||
nextTarget = { parentId, index, intent: "before", targetNodeId: node.id };
|
||||
} else if (relativeY > 0.72) {
|
||||
nextTarget = { parentId, index: index + 1, intent: "after", targetNodeId: node.id };
|
||||
} else {
|
||||
nextTarget = {
|
||||
parentId: node.id,
|
||||
index: (node.children ?? []).length,
|
||||
intent: "inside",
|
||||
targetNodeId: node.id,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
nextTarget = {
|
||||
parentId,
|
||||
index: relativeY < 0.5 ? index : index + 1,
|
||||
intent: relativeY < 0.5 ? "before" : "after",
|
||||
targetNodeId: node.id,
|
||||
};
|
||||
}
|
||||
|
||||
setDragState({ ...nextDragState, dropTarget: nextTarget });
|
||||
};
|
||||
|
||||
const handleContextActionSelect = (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget): void => {
|
||||
if (action.id !== "new-folder") {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (target.kind) {
|
||||
case "workspace":
|
||||
case "home":
|
||||
beginFolderDraft(null, 0);
|
||||
return;
|
||||
case "folder":
|
||||
beginFolderDraft(target.id, (findWorkspaceFolderDepth(workspaceTreeNodes(), target.id) ?? 0) + 1);
|
||||
return;
|
||||
case "settings":
|
||||
case "item":
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -169,12 +697,13 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
|
||||
classList={{
|
||||
[styles.sidebar]: true,
|
||||
[styles.sidebarCollapsed]: props.collapsed,
|
||||
[styles.sidebarDragMode]: !!dragState(),
|
||||
}}
|
||||
aria-label="Left workspace sidebar"
|
||||
data-ui="workspace-sidebar"
|
||||
data-collapsed={props.collapsed ? "true" : "false"}
|
||||
onContextMenu={(event): void => {
|
||||
contextMenu.openMenu(event, sidebarContextMenuTarget());
|
||||
contextMenu.openMenu(event, sidebarContextMenuTarget);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -255,19 +784,39 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
|
||||
</Show>
|
||||
|
||||
<div data-slot="workspace-tree-root">
|
||||
<WorkspaceTreeBranch
|
||||
nodes={appShellData.workspaceTree()}
|
||||
onOpenContextMenu={contextMenu.openMenu}
|
||||
onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
|
||||
/>
|
||||
<WorkspaceTreeBranch
|
||||
nodes={workspaceTreeNodes()}
|
||||
parentId={null}
|
||||
isFolderCollapsed={isFolderCollapsed}
|
||||
onToggleFolder={toggleFolder}
|
||||
pendingFolderDraft={pendingFolderDraft()}
|
||||
pendingFolderName={pendingFolderName()}
|
||||
onPendingFolderNameChange={setPendingFolderName}
|
||||
onSubmitPendingFolder={submitPendingFolder}
|
||||
onCancelPendingFolder={cancelPendingFolder}
|
||||
onOpenContextMenu={contextMenu.openMenu}
|
||||
onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
|
||||
onNodePointerDown={handleNodePointerDown}
|
||||
onNodePointerMove={handleNodePointerMove}
|
||||
dragState={dragState()}
|
||||
isTreeClickSuppressed={suppressNextTreeClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<WorkspaceContextMenu
|
||||
target={contextMenuTarget()}
|
||||
position={contextMenuPosition()}
|
||||
target={contextMenu.menuState()?.target ?? null}
|
||||
position={(() => {
|
||||
const state = contextMenu.menuState();
|
||||
return state
|
||||
? {
|
||||
x: state.x,
|
||||
y: state.y,
|
||||
}
|
||||
: null;
|
||||
})()}
|
||||
menuRef={contextMenu.setMenuRef}
|
||||
onClose={contextMenu.closeMenu}
|
||||
onSelect={handleContextActionSelect}
|
||||
|
||||
Reference in New Issue
Block a user