mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-03 18:47:56 +01:00
0a45311f30
This PR adds support for Outer variants of each DropDirection. When calculating the drop direction, the cursor position is calculated relevant to the box over which it is hovering. The following diagram shows how drop directions are calculated. The colored in center is currently not supported, it is assigned to the top, bottom, left, right direction for now, though it will ultimately be its own distinct direction.  When an outer drop direction is provided for a move operation, if the reference node flexes in the same axis as the drop direction, the new node will be inserted at the same level as the parent of the reference node. If the reference node flexes in a different direction or the reference node does not have a grandparent, the operation will fall back to its non-Outer variant. This also removes some chatty debug statements, adds a blur to the currently-dragging node to indicate that it cannot be dropped onto, and simplifies the deriving of the layout state atom from the tab atom so there's no longer another intermediate derived atom for the layout node. This also adds rudimentary support for rendering custom preview images for any tile being dragged. Right now, this is a simple block containing the block ID, but this can be anything. This resolves an issue where letting React-DnD generate its own previews could take up to a half second, and would block dragging until complete. For Monaco, this was outright failing. It also fixes an issue where the tile layout could animate on first paint. Now, I use React Suspense to prevent the layout from displaying until all the children have loaded.
141 lines
3.6 KiB
TypeScript
141 lines
3.6 KiB
TypeScript
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import { WritableAtom } from "jotai";
|
|
import { DropDirection, FlexDirection } from "./utils.js";
|
|
|
|
/**
|
|
* Represents an operation to insert a node into a tree.
|
|
*/
|
|
export type MoveOperation<T> = {
|
|
/**
|
|
* The index at which the node will be inserted in the parent.
|
|
*/
|
|
index: number;
|
|
|
|
/**
|
|
* The parent node. Undefined if inserting at root.
|
|
*/
|
|
parentId?: string;
|
|
|
|
/**
|
|
* Whether the node will be inserted at the root of the tree.
|
|
*/
|
|
insertAtRoot?: boolean;
|
|
|
|
/**
|
|
* The node to insert.
|
|
*/
|
|
node: LayoutNode<T>;
|
|
};
|
|
|
|
/**
|
|
* Types of actions that modify the layout tree.
|
|
*/
|
|
export enum LayoutTreeActionType {
|
|
ComputeMove = "computeMove",
|
|
Move = "move",
|
|
CommitPendingAction = "commit",
|
|
ResizeNode = "resize",
|
|
InsertNode = "insert",
|
|
DeleteNode = "delete",
|
|
}
|
|
|
|
/**
|
|
* Base class for actions that modify the layout tree.
|
|
*/
|
|
export interface LayoutTreeAction {
|
|
type: LayoutTreeActionType;
|
|
}
|
|
|
|
/**
|
|
* Action for computing a move operation and saving it as a pending action in the tree state.
|
|
*
|
|
* @template T The type of data associated with the nodes of the tree.
|
|
* @see MoveOperation
|
|
* @see LayoutTreeMoveNodeAction
|
|
*/
|
|
export interface LayoutTreeComputeMoveNodeAction<T> extends LayoutTreeAction {
|
|
type: LayoutTreeActionType.ComputeMove;
|
|
node: LayoutNode<T>;
|
|
nodeToMove: LayoutNode<T>;
|
|
direction: DropDirection;
|
|
}
|
|
|
|
/**
|
|
* Action for moving a node within the layout tree.
|
|
*
|
|
* @template T The type of data associated with the nodes of the tree.
|
|
* @see MoveOperation
|
|
*/
|
|
export interface LayoutTreeMoveNodeAction<T> extends LayoutTreeAction, MoveOperation<T> {
|
|
type: LayoutTreeActionType.Move;
|
|
}
|
|
|
|
/**
|
|
* Action for committing a pending action to the layout tree.
|
|
*/
|
|
export interface LayoutTreeCommitPendingAction extends LayoutTreeAction {
|
|
type: LayoutTreeActionType.CommitPendingAction;
|
|
}
|
|
|
|
/**
|
|
* Action for inserting a new node to the layout tree.
|
|
*
|
|
* @template T The type of data associated with the nodes of the tree.
|
|
*/
|
|
export interface LayoutTreeInsertNodeAction<T> extends LayoutTreeAction {
|
|
type: LayoutTreeActionType.InsertNode;
|
|
node: LayoutNode<T>;
|
|
}
|
|
|
|
/**
|
|
* Action for deleting a node from the layout tree.
|
|
*/
|
|
export interface LayoutTreeDeleteNodeAction extends LayoutTreeAction {
|
|
type: LayoutTreeActionType.DeleteNode;
|
|
nodeId: string;
|
|
}
|
|
|
|
/**
|
|
* Represents the state of a layout tree.
|
|
*
|
|
* @template T The type of data associated with the nodes of the tree.
|
|
*/
|
|
export type LayoutTreeState<T> = {
|
|
rootNode: LayoutNode<T>;
|
|
leafs: LayoutNode<T>[];
|
|
pendingAction: LayoutTreeAction;
|
|
generation: number;
|
|
};
|
|
|
|
/**
|
|
* Represents a single node in the layout tree.
|
|
* @template T The type of data associated with the node.
|
|
*/
|
|
export interface LayoutNode<T> {
|
|
id: string;
|
|
data?: T;
|
|
children?: LayoutNode<T>[];
|
|
flexDirection: FlexDirection;
|
|
size?: number;
|
|
}
|
|
|
|
/**
|
|
* An abstraction of the type definition for a writable layout node atom.
|
|
*/
|
|
export type WritableLayoutNodeAtom<T> = WritableAtom<LayoutNode<T>, [value: LayoutNode<T>], void>;
|
|
|
|
/**
|
|
* An abstraction of the type definition for a writable layout tree state atom.
|
|
*/
|
|
export type WritableLayoutTreeStateAtom<T> = WritableAtom<LayoutTreeState<T>, [value: LayoutTreeState<T>], void>;
|
|
|
|
export type ContentRenderer<T> = (data: T, ready: boolean, onClose?: () => void) => React.ReactNode;
|
|
|
|
export type PreviewRenderer<T> = (data: T) => React.ReactElement;
|
|
|
|
export interface LayoutNodeWaveObj<T> extends WaveObj {
|
|
node: LayoutNode<T>;
|
|
}
|