uiconfig-blueprint 0.1.0-dev.6 → 0.1.0-dev.7

package/src/bpComponents/BPFolderComponent.scss

@@ -29,7 +29,7 @@
   background-color: $light-gray4 !important;
 }
 .bp5-dark .folder-card {
-  background-color: $dark-gray3 !important;
+  background-color: $dark-gray1 !important;
 }
 
 
@@ -68,11 +68,15 @@
   background-color: $dark-gray1 !important;
 
   &:hover {
-      background-color: $dark-gray3 !important;
+      background-color: $dark-gray2 !important;
   }
 
   &:active {
-      background-color: $dark-gray5 !important;
+      background-color: $dark-gray2 !important;
+  }
+
+  &.folder-trigger-button-expanded{
+    background-color: $dark-gray2 !important;
   }
 }
 
@@ -93,6 +97,7 @@
     //margin-left: $pt-grid-size;
     padding-top: 6px;
     padding-bottom: 6px;
+    min-height: 36px;
   }
 }
 

package/src/bpComponents/BPFolderComponent.tsx

@@ -5,6 +5,9 @@ import {ConfigObject} from "../ConfigObject";
 import {PanelActions} from "@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes";
 import {safeSetProperty} from 'ts-browser-helpers'
 import {BPContainerComponent, BPContainerComponentState} from './BPContainerComponent'
+import classNames from "classnames";
+import {Classes} from "@blueprintjs/core/src/common";
+import {AnimationStates} from "@blueprintjs/core/lib/esm/components/collapse/collapse";
 
 export type BPFolderComponentState = BPContainerComponentState & {
 }
@@ -39,18 +42,21 @@ export class BPFolderComponent extends BPContainerComponent<BPFolderComponentSta
                 enabled={enabledToggle ? this.context.methods.getRawValue(enabledToggle) : undefined}
                 onEnabledChange={(e) => enabledToggle && this.context.methods.setValue(enabledToggle, e.target.checked, {}).then(() => this.setState(this.state))}
             >
-                <Collapse isOpen={this.state.expanded} keepChildrenMounted={false}>
+                <Collapse2 isOpen={this.state.expanded} keepChildrenMounted={true} transitionDuration={300}>
                     <div className="folder-children" style={{listStyleType: "none", paddingLeft: this.props.level??0 > 2 ? "6px" : 0}}> {/*todo use parameter instead of const 6*/}
-                        {this.state.children.map((c, i) => <ConfigObject key={'c' + i} {...this.props} config={c}
-                                                                         level={(this.props.level ?? 0) + 1}/>)}
+                        {this.state.children.map((c, i) =>
+                            <ConfigObject key={'c' + i} {...this.props} config={c}
+                                          level={(this.props.level ?? 0) + 1}/>
+                        )}
                     </div>
-                </Collapse>
+                </Collapse2>
             </FolderHeadCard>
         ) : null
     }
 }
 
 export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, label: string, minimal: boolean, level: number, disabled?: boolean, enabled?: boolean, onEnabledChange?: ChangeEventHandler<HTMLInputElement>, onClick: DOMAttributes<HTMLElement>['onClick'] }>> = (props) => {
+    const hasEnabled = (props.enabled !== undefined)
     return (
         <div
             // interactive={!props.open}
@@ -76,7 +82,7 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                 {/*</Button>*/}
 
                 <Button
-                    className="folder-trigger-button"
+                    className={"folder-trigger-button " + (props.open ? "folder-trigger-button-expanded" : "")}
                     // fill={!props.minimal}
                     fill={true}
                     onClick={props.onClick}
@@ -85,16 +91,18 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                     small={props.minimal}
                     style={props.level ? {marginLeft: "6px"} : {fontSize: "0.95rem", paddingTop: "8px", paddingBottom: "8px"}}
                     intent={props.open ? Intent.PRIMARY : Intent.NONE}
-                    icon={props.enabled !== undefined  && <span style={{minWidth: '20px'}}></span>} // adding a span here will center the text in the button
-                    rightIcon={(
-                        <Icon icon="chevron-right" style={{
-                            rotate: props.open ? "90deg" : "0deg",
-                            transition: "rotate 0.25s ease-in-out"
-                        }}/>
+                    // icon={props.enabled !== undefined  && <span style={{minWidth: '20px'}}></span>} // adding a span here will center the text in the button
+                    icon={(
+                        <>
+                            <Icon icon="caret-right" style={{
+                                rotate: props.open ? "90deg" : "0deg",
+                                transition: "rotate 0.25s ease-in-out"
+                            }}/>
+                        </>
                     )}>{props.label}
                 </Button>
-                {(props.enabled !== undefined) && <Checkbox
-                    style={{margin: 0, position: 'absolute', left: '5px'}}
+                {hasEnabled && <Checkbox
+                    style={{margin: 0, position: 'absolute', left: '10px'}}
                     large inline
                     defaultChecked={props.enabled}
                     onChange={props.onEnabledChange}
@@ -106,3 +114,67 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
         </div>
     )
 }
+
+export class Collapse2 extends Collapse{
+    private contentsRefHandler2 = (el: HTMLElement | null) => {
+        // @ts-ignore
+        this.contents = el;
+        // @ts-ignore
+        if (this.contents != null) {
+            // @ts-ignore
+            const height = this.contents.clientHeight;
+            this.setState({
+                animationState: this.props.isOpen ? AnimationStates.OPEN : AnimationStates.CLOSED,
+                height: height === 0 ? undefined : `${height}px`,
+                heightWhenOpen: height === 0 ? undefined : height,
+            });
+        }
+    };
+
+    public render() {
+        const isContentVisible = this.state.animationState !== AnimationStates.CLOSED;
+        const shouldRenderChildren = isContentVisible || this.props.keepChildrenMounted;
+        // const displayWithTransform = isContentVisible && this.state.animationState !== AnimationStates.CLOSING;
+        const isAutoHeight = this.state.height === "auto";
+
+        const containerStyle = {
+            height: isContentVisible ? this.state.height : undefined,
+            overflowY: isAutoHeight ? "visible" : undefined,
+            // transitions don't work with height: auto
+            transition: isAutoHeight ? "none" : undefined,
+        };
+
+        const contentsStyle = {
+            // only use heightWhenOpen while closing
+            // transform: displayWithTransform ? "translateY(0)" : `translateY(-${this.state.heightWhenOpen}px)`,
+            // transitions don't work with height: auto
+            // transition: isAutoHeight ? "none" : undefined,
+            display: "block", // for opacity animation
+            visibility: isContentVisible ? "visible" : "hidden",
+            opacity: this.state.animationState === AnimationStates.CLOSING ||  this.state.animationState === AnimationStates.CLOSED ? 0.1 : 1,
+        } as React.CSSProperties;
+
+        // if(isContentVisible && !isAutoHeight && this.state.heightWhenOpen && this.state.height){
+        //     const h = parseInt(this.state.height)
+        //     contentsStyle.opacity = h / this.state.heightWhenOpen;
+        //     console.log(contentsStyle.opacity)
+        // }
+
+        return React.createElement(
+            this.props.component!,
+            {
+                className: classNames(Classes.COLLAPSE, this.props.className),
+                style: containerStyle,
+            },
+            <div
+                className={Classes.COLLAPSE_BODY}
+                ref={this.contentsRefHandler2}
+                style={contentsStyle}
+                aria-hidden={!isContentVisible}
+            >
+                {shouldRenderChildren ? this.props.children : null}
+            </div>,
+        );
+    }
+
+}

package/src/bpComponents/BPInputComponent.tsx

@@ -26,7 +26,10 @@ export abstract class BPInputComponent<
 
     render() {
         return !this.state.hidden ? (
-            <FormGroupComponent disabled={this.state.disabled} label={this.state.label} flexBasis={this.flexBasis}>
+            <FormGroupComponent disabled={this.state.disabled}
+                                label={this.state.label}
+                                flexBasis={this.state.baseWidth ?? this.flexBasis}
+            >
                 {this.renderInput()}
             </FormGroupComponent>
         ) : null

package/src/bpComponents/BPNumberInputComponent.tsx

@@ -27,9 +27,10 @@ export class BPNumberInputComponent extends BPInputComponent<number> {
                 disabled={this.state.disabled}
                 readOnly={this.state.readOnly}
                 defaultValue={this.state.value}
+                fill={true}
                 ref={this._inputs[0]}
                 key={this.props.config.uuid}
-                onChange2={this._onChange} fill={false}/>
+                onChange2={this._onChange}/>
         )
     }
 }

package/src/bpComponents/BPTextInputComponent.tsx

@@ -20,6 +20,7 @@ export class BPTextInputComponent extends BPInputComponent<string> {
                 disabled={this.state.disabled}
                 readOnly={this.state.readOnly}
                 key={this.props.config.uuid}
+                fill={true}
                 onChange={this._onChange}/>
         )
     }

package/src/bpComponents/BPToggleInputComponent.tsx

@@ -16,14 +16,17 @@ export class BPToggleInputComponent extends BPInputComponent<boolean> {
         return (
             <Switch alignIndicator="right" defaultChecked={this.state.value}
                     disabled={this.state.disabled} readOnly={this.state.readOnly}
-                    label={this.state.label} onChange={this._onChange}
-                    className="switch" innerLabelChecked="on" innerLabel="off"/>
+                    labelElement={(<span className={"bp5-label"} title={this.state.label}>{this.state.label}</span>)} onChange={this._onChange}
+                    inline={false} large={false}
+                    className="switch"/>
         )
     }
 
     render() {
         return !this.state.hidden ? (
-            <div className="xPaddedContent folderContent" style={{flexBasis: "100%"}}>
+            <div className="xPaddedContent folderContent"
+                 style={{flexBasis: this.state.baseWidth ?? this.flexBasis}}
+            >
                 {this.renderInput()}
             </div>
         ) : null

package/src/bpComponents/BPTreeComponent.tsx

@@ -1,5 +1,7 @@
+import {Tree2} from "../components/Tree2";
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
-import {Tree, TreeNodeInfo} from "@blueprintjs/core";
+import {TreeNodeInfo} from "@blueprintjs/core";
+import React from "react";
 
 export type BPTreeComponentState<T = {}> = BPComponentState & {
     nodes: TreeNodeInfo<T>[]
@@ -8,8 +10,8 @@ export type BPTreeComponentState<T = {}> = BPComponentState & {
 // https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/treeExample.tsx
 type NodePath = (string|number)[];
 
-export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|PrimitiveVal|void*/ = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
-    constructor(props: BPComponentProps<TConfigVal>, context: UiConfigRendererContextType) {
+export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|PrimitiveVal|void*/ = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>, BPComponentProps<TConfigVal> & {className: string}> {
+    constructor(props: BPComponentProps<TConfigVal> & {className: string}, context: UiConfigRendererContextType) {
         super(props, context, {nodes: []});
     }
 
@@ -189,8 +191,15 @@ export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|Primitiv
         e.stopPropagation()
     }
 
+    protected _canDropNode(_sourceNode: TreeNodeInfo<T>, _sourcePath: NodePath, _targetNode: TreeNodeInfo<T>, _targetPath: NodePath, _index?: number) {
+        return true
+    }
+    protected _onDropNode(_sourceNode: TreeNodeInfo<T>, _sourcePath: NodePath, _targetNode: TreeNodeInfo<T>, _targetPath: NodePath, _e?: React.DragEvent, _index?: number) {
+        return
+    }
+
     render() {
-        const TreeT = Tree.ofType<T>()
+        const TreeT = Tree2.ofType<T>()
         return !this.state.hidden ? (
             <div
                 style={{width: "100%", height: "100%"}}
@@ -199,7 +208,14 @@ export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|Primitiv
             >
             <TreeT
                 contents={this.state.nodes}
-                className="folderContent"
+                className={"folderContent " + (this.props.className||'')}
+                canDropNode={(node, path, targetNode, targetPath, index) => {
+                    return this._canDropNode(node, path, targetNode, targetPath, index)
+                }}
+                onNodeDrop={(node, path, targetNode, targetPath, e, index) => {
+                    console.log(node, path, targetNode, targetPath, e);
+                    this._onDropNode(node, path, targetNode, targetPath, e, index)
+                }}
                 onNodeExpand={(node, _path, _e) => {
                     this._onNodeExpandCollapse(node.id)
                 }}

package/src/components/ExtendedNumericInput.tsx

@@ -49,7 +49,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
 
     public render() {
         const {value} = this.state;
-        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props}
+        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props, leftIcon: undefined}
         if (props2.onChange2) delete props2.onChange2
 
         return (

package/src/components/InspectorStackComponent.tsx

@@ -6,7 +6,7 @@ import {UiConfigRendererContext} from '../bpComponents/BPComponent'
 
 // import {ViewerAppContext} from "./ViewerAppComponent";
 
-export function InspectorStackComponent({config}: { config: UiObjectConfig<any, 'panel'> }) {
+export function InspectorStackComponent({config, className}: { config: UiObjectConfig<any, 'panel'>, className?: string }) {
     const renderer = React.useContext(UiConfigRendererContext)
     const stackItem = React.useCallback(() => {
         return {
@@ -30,7 +30,7 @@ export function InspectorStackComponent({config}: { config: UiObjectConfig<any,
     }, [setCurrentPanelStack, stackItem])
 
     return (
-        <Card className="bpInspectorCard" style={{borderRadius: 0}}>
+        <Card className={"bpInspectorCard " + className||''} style={{borderRadius: 0}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}

package/src/components/Tree2.tsx

@@ -0,0 +1,344 @@
+/*
+ * Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Changes:
+ * - Added support for drag and drop
+ *
+ */
+import classNames from "classnames";
+import * as React from "react";
+
+import type {TreeEventHandler} from "@blueprintjs/core";
+import {Classes, DISPLAYNAME_PREFIX, type Props} from "@blueprintjs/core";
+import {TreeNode2} from "./TreeNode2";
+import {TREE_NODE} from "@blueprintjs/core/lib/esnext/common/classes";
+import { TreeNodeInfo } from "./treeTypes";
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export interface TreeProps<T = {}> extends Props {
+    /**
+     * Whether to use a compact appearance which reduces the visual padding around node content.
+     */
+    compact?: boolean;
+
+    /**
+     * The data specifying the contents and appearance of the tree.
+     */
+    contents: ReadonlyArray<TreeNodeInfo<T>>;
+
+    /**
+     * Invoked when a node is clicked anywhere other than the caret for expanding/collapsing the node.
+     */
+    onNodeClick?: TreeEventHandler<T>;
+
+    /**
+     * Invoked when caret of an expanded node is clicked.
+     */
+    onNodeCollapse?: TreeEventHandler<T>;
+
+    /**
+     * Invoked when a node is right-clicked or the context menu button is pressed on a focused node.
+     */
+    onNodeContextMenu?: TreeEventHandler<T>;
+
+    /**
+     * Invoked when a node is double-clicked. Be careful when using this in combination with
+     * an `onNodeClick` (single-click) handler, as the way this behaves can vary between browsers.
+     * See http://stackoverflow.com/q/5497073/3124288
+     */
+    onNodeDoubleClick?: TreeEventHandler<T>;
+
+    /**
+     * Invoked when the caret of a collapsed node is clicked.
+     */
+    onNodeExpand?: TreeEventHandler<T>;
+
+    /**
+     * Invoked when the mouse is moved over a node.
+     */
+    onNodeMouseEnter?: TreeEventHandler<T>;
+
+    /**
+     * Invoked when the mouse is moved out of a node.
+     */
+    onNodeMouseLeave?: TreeEventHandler<T>;
+
+    /**
+     * Invoked when a node is dropped onto another node.
+     */
+    onNodeDrop?: (source: TreeNodeInfo<T>, sourcePath: number[], target: TreeNodeInfo<T>, targetPath: number[], event: React.DragEvent<HTMLElement>, index?: number) => void;
+
+    /**
+     * Invoked when a node drag starts.
+     */
+    onNodeDragStart?: (node: TreeNodeInfo<T>, path: number[], event: React.DragEvent<HTMLElement>) => void;
+
+    /**
+     * Invoked when a node is dragged over another node.
+     */
+    onNodeDragOver?: (node: TreeNodeInfo<T>, path: number[], event: React.DragEvent<HTMLElement>) => void;
+
+    /**
+     * Invoked when a node drag ends.
+     */
+    onNodeDragEnd?: (node: TreeNodeInfo<T>, path: number[], event: React.DragEvent<HTMLElement>) => void;
+
+    /**
+     * Invoked when a dragged node enters another node.
+     */
+    onNodeDragEnter?: (node: TreeNodeInfo<T>, path: number[], event: React.DragEvent<HTMLElement>) => void;
+
+    /**
+     * Invoked when a dragged node leaves another node.
+     */
+    onNodeDragLeave?: (node: TreeNodeInfo<T>, path: number[], event: React.DragEvent<HTMLElement>) => void;
+
+    /**
+     * A function that determines whether a node can be dropped onto another node.
+     * @param source
+     * @param target
+     */
+    canDropNode?: (source: TreeNodeInfo<T>, sourcePath: number[], target: TreeNodeInfo<T>, targetPath: number[], index?: number) => boolean;
+}
+
+/**
+ * Tree component.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/tree
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export class Tree2<T = {}> extends React.Component<TreeProps<T>> {
+    public static displayName = `${DISPLAYNAME_PREFIX}.Tree`;
+
+    public static ofType<U>() {
+        return Tree2 as new (props: TreeProps<U>) => Tree2<U>;
+    }
+
+    public static nodeFromPath<U>(
+        path: readonly number[],
+        treeNodes?: ReadonlyArray<TreeNodeInfo<U>>,
+    ): TreeNodeInfo<U> {
+        if (path.length === 1) {
+            return treeNodes![path[0]];
+        } else {
+            return Tree2.nodeFromPath(path.slice(1), treeNodes![path[0]].childNodes);
+        }
+    }
+
+    private nodeRefs: { [nodeId: string]: HTMLElement } = {};
+    private dragSource: { node: TreeNodeInfo<T>; path: number[] } | null = null;
+    private draggingNode?: { node: TreeNodeInfo<T>; path: number[] };
+    private dragOverNode?: { node: TreeNodeInfo<T>; path: number[]; currentTarget?: HTMLElement };
+    private rootRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
+
+    public render() {
+        return (
+            <div
+                className={classNames(Classes.TREE, this.props.className, {
+                    [Classes.COMPACT]: this.props.compact,
+                })}
+                ref={this.rootRef}
+            >
+                {this.renderNodes(this.props.contents, [], Classes.TREE_ROOT)}
+            </div>
+        );
+    }
+
+    /**
+     * Returns the underlying HTML element of the `Tree` node with an id of `nodeId`.
+     * This element does not contain the children of the node, only its label and controls.
+     * If the node is not currently mounted, `undefined` is returned.
+     */
+    public getNodeContentElement(nodeId: string | number): HTMLElement | undefined {
+        return this.nodeRefs[nodeId];
+    }
+    private renderNodeSpacer = (node: TreeNodeInfo<T>, path: number[], i: number)=> {
+        return <li className={Classes.TREE + "-drop-spacer"}
+                   key={"drop-" + node.id + "-" + i}
+        >
+            <div
+                onDragOver={(e) => this.handleNodeDragOver(node, path, e, i)}
+                onDrop={(e) => this.handleNodeDrop(node, path, e, i)}
+                onDragEnter={(e) => this.handleNodeDragEnter(node, path, e, i)}
+                onDragLeave={(e) => this.handleNodeDragLeave(node, path, e, i)}
+            ></div>
+        </li>
+    }
+
+    private renderNodes(
+        treeNodes: ReadonlyArray<TreeNodeInfo<T>> | undefined,
+        currentPath?: number[],
+        className?: string,
+        parentNode?: TreeNodeInfo<T>,
+    ) {
+        if (treeNodes == null) {
+            return null;
+        }
+
+        const nodeItems = treeNodes.map((node, i) => {
+            const elementPath = currentPath!.concat(i);
+            const draggable = !!node.draggable;
+            const droppable = !!node.droppable;
+            const parentDroppable = !!(parentNode && parentNode.droppable);
+            return (<>
+                {parentDroppable && i === 0 && this.renderNodeSpacer(parentNode, elementPath, i)}
+                <TreeNode2<T>
+                        {...node}
+                        key={node.id}
+                        contentRef={this.handleContentRef}
+                        depth={elementPath.length - 1}
+                        onClick={this.handleNodeClick}
+                        onContextMenu={this.handleNodeContextMenu}
+                        onCollapse={this.handleNodeCollapse}
+                        onDoubleClick={this.handleNodeDoubleClick}
+                        onExpand={this.handleNodeExpand}
+                        onMouseEnter={this.handleNodeMouseEnter}
+                        onMouseLeave={this.handleNodeMouseLeave}
+                        path={elementPath}
+                        draggable={draggable}
+                        onDragStart={draggable ? this.handleNodeDragStart : undefined}
+                        onDragEnd={draggable ? this.handleNodeDragEnd : undefined}
+                        onDragOver={droppable ? this.handleNodeDragOver : undefined}
+                        onDrop={droppable ? this.handleNodeDrop : undefined}
+                        onDragEnter={droppable ? this.handleNodeDragEnter : undefined}
+                        onDragLeave={droppable ? this.handleNodeDragLeave : undefined}
+                >
+                    {this.renderNodes(node.childNodes, elementPath, undefined, node)}
+                </TreeNode2>
+                {parentDroppable && i >= 0 && this.renderNodeSpacer(parentNode, elementPath, i + 1)}
+            </>)
+        });
+
+        return <ul className={classNames(Classes.TREE_NODE_LIST, className)}>{nodeItems}</ul>;
+    }
+
+    private handleContentRef = (node: TreeNodeInfo<T>, element: HTMLElement | null) => {
+        if (element != null) {
+            this.nodeRefs[node.id] = element;
+        } else {
+            // don't want our object to get bloated with old keys
+            delete this.nodeRefs[node.id];
+        }
+    };
+
+    private handleNodeCollapse = (node: TreeNodeInfo<T>, path: number[], e: React.MouseEvent<HTMLElement>) => {
+        this.props.onNodeCollapse?.(node, path, e);
+    };
+
+    private handleNodeClick = (node: TreeNodeInfo<T>, path: number[], e: React.MouseEvent<HTMLElement>) => {
+        this.props.onNodeClick?.(node, path, e);
+    };
+
+    private handleNodeContextMenu = (node: TreeNodeInfo<T>, path: number[], e: React.MouseEvent<HTMLElement>) => {
+        this.props.onNodeContextMenu?.(node, path, e);
+    };
+
+    private handleNodeDoubleClick = (node: TreeNodeInfo<T>, path: number[], e: React.MouseEvent<HTMLElement>) => {
+        this.props.onNodeDoubleClick?.(node, path, e);
+    };
+
+    private handleNodeExpand = (node: TreeNodeInfo<T>, path: number[], e: React.MouseEvent<HTMLElement>) => {
+        this.props.onNodeExpand?.(node, path, e);
+    };
+
+    private handleNodeMouseEnter = (node: TreeNodeInfo<T>, path: number[], e: React.MouseEvent<HTMLElement>) => {
+        this.props.onNodeMouseEnter?.(node, path, e);
+    };
+
+    private handleNodeMouseLeave = (node: TreeNodeInfo<T>, path: number[], e: React.MouseEvent<HTMLElement>) => {
+        this.props.onNodeMouseLeave?.(node, path, e);
+    };
+
+    // Drag and drop handlers
+    private handleNodeDragStart = (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>) => {
+        this.dragSource = { node, path };
+        this.draggingNode = { node, path };
+        this.rootRef?.current?.classList.add(Classes.TREE + "-dragging-node");
+        this.addNodeClass(node, TREE_NODE + "-dragging");
+        e.dataTransfer.effectAllowed = "move";
+        try {
+            e.dataTransfer.setData("application/json", JSON.stringify({ nodeId: node.id, path }));
+        } catch {
+            // ignore
+        }
+        this.props.onNodeDragStart?.(node, path, e);
+    };
+
+    private handleNodeDragOver = (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>, index?: number) => {
+        if (this.dragSource && this.props.canDropNode) {
+            const canDrop = this.props.canDropNode(this.dragSource.node, this.dragSource.path, node, path, index);
+            if (!canDrop) {
+                e.dataTransfer.dropEffect = "none";
+                e.preventDefault();
+                return;
+            }
+        }
+        const currentTarget = e.currentTarget as HTMLElement;
+        if ((this.dragOverNode?.node.id !== node.id || this.dragOverNode?.currentTarget !== currentTarget) && this.draggingNode?.node.id !== node.id) {
+            if (this.dragOverNode) this.removeNodeClass(this.dragOverNode.node, TREE_NODE + "-dragover", this.dragOverNode.currentTarget);
+            this.dragOverNode = { node, path, currentTarget };
+            this.addNodeClass(this.dragOverNode.node, TREE_NODE + "-dragover", this.dragOverNode.currentTarget);
+        }
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        this.props.onNodeDragOver?.(node, path, e);
+    };
+
+    private handleNodeDrop = (targetNode: TreeNodeInfo<T>, targetPath: number[], e: React.DragEvent<HTMLElement>, index?: number) => {
+        e.preventDefault();
+        const source = this.dragSource
+        const canDrop = !source ? false : (this.props.canDropNode ? this.props.canDropNode(source.node, source.path, targetNode, targetPath, index) : true);
+        if (this.dragOverNode) this.removeNodeClass(this.dragOverNode.node, TREE_NODE + "-dragover", this.dragOverNode.currentTarget);
+        if (this.draggingNode) this.removeNodeClass(this.draggingNode.node, TREE_NODE + "-dragging");
+        this.dragSource = null;
+        this.draggingNode = undefined;
+        this.rootRef?.current?.classList.remove(Classes.TREE + "-dragging-node");
+        this.dragOverNode = undefined;
+        if (canDrop && source && this.props.onNodeDrop) {
+            this.props.onNodeDrop(source.node, source.path, targetNode, targetPath, e, index);
+        }
+    };
+
+    private handleNodeDragEnd = (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>, _index?: number) => {
+        if (this.draggingNode) this.removeNodeClass(this.draggingNode.node, TREE_NODE + "-dragging");
+        if (this.dragOverNode) this.removeNodeClass(this.dragOverNode.node, TREE_NODE + "-dragover", this.dragOverNode.currentTarget);
+        this.dragSource = null;
+        this.draggingNode = undefined;
+        this.rootRef?.current?.classList.remove(Classes.TREE + "-dragging-node");
+        this.dragOverNode = undefined;
+        this.props.onNodeDragEnd?.(node, path, e);
+    };
+
+    private handleNodeDragEnter = (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>, _index?: number) => {
+        this.props.onNodeDragEnter?.(node, path, e);
+    };
+
+    private handleNodeDragLeave = (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>, _index?: number) => {
+        if (this.dragOverNode) this.removeNodeClass(this.dragOverNode.node, TREE_NODE + "-dragover", this.dragOverNode.currentTarget);
+        this.dragOverNode = undefined;
+        this.props.onNodeDragLeave?.(node, path, e);
+    };
+
+    private addNodeClass = (node: TreeNodeInfo<T>|number[], className: string, currentTarget?: HTMLElement) => {
+        const el = this.nodeRefs[!Array.isArray(node) ? node.id : Tree2.nodeFromPath(node, this.props.contents).id];
+        if (el) el.classList.add(className);
+        if(currentTarget) currentTarget.classList.add(className);
+    }
+    private removeNodeClass = (node: TreeNodeInfo<T>|number[], className: string, currentTarget?: HTMLElement) => {
+        const el = this.nodeRefs[!Array.isArray(node) ? node.id : Tree2.nodeFromPath(node, this.props.contents).id];
+        if (el) el.classList.remove(className);
+        if(currentTarget) currentTarget.classList.remove(className);
+    }
+}